如何使div元素可编辑（当我点击它时就像textarea一样）？ [英] How do I make a div element editable (like a textarea when I click it)?
问题描述
这是我的代码：
<!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>
谢谢
推荐答案
让我们通过它。
你不能使div可编辑。至少就目前而言，没有可编辑的div这样的东西。所以问题是要找出用于编辑的内容。 textarea完美无缺。因此，想法是以某种方式得到div目前所在的textarea。
You can't make a div editable. There's no such thing as an editable div, at least for now. So the problem is finding out what to use for editing instead. A textarea works perfectly. So the idea is to somehow get a textarea where the div currently sits.
问题是我们如何以及从何处获得textarea。有多种方法，但其中一种方法是动态创建textarea：
The question is how and from where do we get the textarea. There are various ways, but one of them is to dynamically create a textarea on the fly:
var editableText = $("<textarea />");
并将其替换为div：
$("#myDiv").replaceWith(editableText);
textarea现已到位。但它是空的，我们刚刚更换了div而失去了一切。所以我们需要以某种方式保留div的文本。一种方法是在替换之前复制div中的text / html：
The textarea is in place now. But it is empty and we have just replaced the div and lost everything. So we need to preserve the text of the div somehow. One way is to copy the text/html inside the div before replacing it:
var divHtml = $("#myDiv").html(); // or text(), whatever suits.
一旦我们从div获得html，我们就可以填充textarea并安全地替换div textarea的。并在用户可能想要开始编辑时将焦点设置在textarea中。到目前为止结合所有工作，我们得到：
Once we have the html from the div, we can populate the textarea and safely replace the div with the textarea. And set the focus inside the textarea as the user might want to start editing. Combining all the work upto this point, we get:
// 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）。点击（..）时，我们创建一个点击处理程序，并执行以上所有操作。
It's functional but nothing happens when a user clicks a div because we didn't setup any events. Let's wire up the events. When the user clicks any div $("div").click(..), we create a click handler, and do all of the above.
$("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();
});
这很好，但是当用户点击时我们想要一种方法来恢复我们的div或离开textarea。用户离开控件时触发的表单控件有 blur 事件。这可用于检测用户何时离开textarea，并替换div。这次我们完全相反。保留textarea的值，创建一个动态div，设置它的html，并替换textarea。
This is good, but we'd want a way to get our div back when a user clicks out or leaves the textarea. There is a blur event for form controls that is triggered when a user leaves the control. That can be used to detect when a user leaves the textarea, and replace back the div. We do the exact reverse this time. Preserve the value of textarea, create a dynamic div, set it's html, and replace out the 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，我们必须再次设置点击事件。我们已经有了整个代码，但比重复两次更好，最好用它来制作一个函数。
Everything is great, except that this new div will no longer convert into a textarea on click. This is a newly created div, and we'll have to setup the click event again. We already have the entire code, but better than repeating it twice, it's better to make a function out of it.
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也一样。我们也将它转换为函数。
Since the whole operation is two-way reversible, we'll need to do the same for the textarea. Let's convert that into a function too.
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 ，下面的行会触发所有内容：
Wiring up everything together, we have 2 functions, divClicked, editableTextBlurred and the line below triggers everything:
$("div").click(divClicked);
在 http://jsfiddle.net/GeJkU/ 。这不是以任何方式编写可编辑div的最佳方法，而只是逐步启动和处理解决方案的一种方法。老实说，我在写这篇长篇文章时和你一样学到了很多东西。注销，adios！
Checkout this code at http://jsfiddle.net/GeJkU/. This is not the best way of writing editable divs by any means, but just one way to start and approach the solution step by step. Honestly I have learnt just as much as you in writing this long piece. Signing off, adios!
这篇关于如何使div元素可编辑（当我点击它时就像textarea一样）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
