如何使用闪烁光标和可编辑文本制作div而不使用<input />？

Question

我需要制作一个div图层，这样当你点击它时你的光标会闪烁，你可以像<input type="text">一样插入/删除文字，除了我不想用它作为它有点太局限于我的情况。

我绝对可以使用JavaScript。

Answer 1

DIV元素具有（其他元素）contentEditable属性，您可以在Javascript中将其设置为true。

getElementById('YourDiv').contentEditable = true;

Answer 2

您可以通过将contentEditable属性/属性设置为true来使div可编辑。但是，对于任何比基本编辑更强大或更灵活的东西，您可能希望查看现有的解决方案，例如：

• TinyMCE
• Kevin Roth's RTE
• The YUI editor

Answer 3

Jquery可以像这样使用：

$.('#yourDiv').click(function() {
    $(this).attr('contenteditable', 'true');
});

Answer 4

我建议您使用textarea，如果这还不够，请使用像tinyMCE或FCKeditor这样的WYSIWYG编辑器。

Answer 5

contenteditable 属性可用于此目的。以下代码行已经在IE7和Firefox 3.0.10中进行了测试。一部分，我注意到这个属性应该只用于小写;否则它不会在Firefox中运行。

<div id="Div_ID" contenteditable="true" tabindex="0">
   Enter text here
</div>

Answer 6

根据我了解您的问题，您可以通过将textarea添加到div来重新获得该问题。将textarea自动调整大小占据整个div区域非常简单，看起来像div。

至于contentEditable，我见过一些浏览器，支持div - 元素的这个功能，但却没有。无论如何，您可以在div中使用iframe。它是document - 元素可以有contentEditable。