zjm*_*126 53 javascript jquery
这是我的代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
<style type="text/css" media="screen">
</style>
<!--<div id="map_canvas" style="width: 500px; height: 300px;background:blue;"></div>-->
<div class=b style="width: 200px; height: 200px;background:pink;position:absolute;left:500px;top:100px;"></div>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
</script>
</body>
</html>
谢谢
Anu*_*rag 136
让我们来解决它.
你不能使div可编辑.至少就目前而言,没有可编辑的div这样的东西.所以问题是要找出用于编辑的内容.textarea完美无缺.因此,想法是以某种方式得到div当前所在的textarea.
问题是我们如何以及从哪里获得textarea.有多种方法,但其中一种方法是动态创建textarea:
var editableText = $("<textarea />");
并用div替换它:
$("#myDiv").replaceWith(editableText);
textarea现在已经到位.但它是空的,我们刚刚更换了div而失去了一切.所以我们需要以某种方式保留div的文本.一种方法是在替换之前复制div中的text/html:
var divHtml = $("#myDiv").html(); // or text(), whatever suits.
一旦我们从div获得了html,我们就可以填充textarea并用textarea安全地替换div.并在用户可能想要开始编辑时将焦点设置在textarea中.到目前为止,将所有工作结合起来,我们得到:
// save the html within the div
var divHtml = $("#myDiv").html();
// create a dynamic textarea
var editableText = $("<textarea />");
// fill the textarea with the div's text
editableText.val(divHtml);
// replace the div with the textarea
$("#myDiv").replaceWith(editableText);
// editableText.focus();
它很实用,但是当用户点击div时没有任何反应,因为我们没有设置任何事件.让我们联系这些事件.当用户单击任何div时$("div").click(..),我们创建一个单击处理程序,并执行上述所有操作.
$("div").click(function() {
var divHtml = $(this).html(); // notice "this" instead of a specific #myDiv
var editableText = $("<textarea />");
editableText.val(divHtml);
$(this).replaceWith(editableText);
editableText.focus();
});
这很好,但是当用户点击或离开textarea时,我们想要一种方法来恢复我们的div.有一个blur用于当用户离开控件时触发表单控件的事件.这可用于检测用户何时离开textarea,并替换div.这次我们完全相反.保留textarea的值,创建一个动态div,设置它的html,并替换textarea.
$(editableText).blur(function() {
// Preserve the value of textarea
var html = $(this).val();
// create a dynamic div
var viewableText = $("<div>");
// set it's html
viewableText.html(html);
// replace out the textarea
$(this).replaceWith(viewableText);
});
一切都很棒,除了这个新的div不再能在点击时转换为textarea.这是一个新创建的div,我们必须click再次设置该事件.我们已经拥有了整个代码,但比重复两次更好,最好用它来创建一个函数.
function divClicked() {
var divHtml = $(this).html();
var editableText = $("<textarea />");
editableText.val(divHtml);
$(this).replaceWith(editableText);
editableText.focus();
// setup the blur event for this new textarea
editableText.blur(editableTextBlurred);
}
由于整个操作是双向可逆的,我们需要为textarea做同样的事情.让我们把它转换成一个函数.
function editableTextBlurred() {
var html = $(this).val();
var viewableText = $("<div>");
viewableText.html(html);
$(this).replaceWith(viewableText);
// setup the click event for this new div
$(viewableText).click(divClicked);
}
一起接线一切,我们有2个功能divClicked,editableTextBlurred以及线下引发的一切:
$("div").click(divClicked);
在http://jsfiddle.net/GeJkU/上查看此代码.这不是以任何方式编写可编辑div的最佳方法,而只是逐步启动和处理解决方案的一种方法.老实说,我在写这篇长篇文章时和你一样学到了很多东西.注销,adios!
Nat*_*han 76
对于a <div>,您可以使用此HTML属性使其可编辑:
<div contenteditable="true">Anything inside this div will be editable!</div>更多信息:http://html5demos.com/contenteditable
希望这可以帮助.
基于Anurag的答案我写了一个小的jquery插件:
https://github.com/zevero/jquery-html-editable
这允许您使所有'div.myDiv'元素可编辑:
$('body').html_editable('div.myDiv');
| 归档时间： |
|
| 查看次数： |
93138 次 |
| 最近记录： |