如何在不使用<input>的情况下使用闪烁光标和可编辑文本创建div？

Question

我需要制作一个div层，这样当你点击它时，你的光标会闪烁，你可以插入/删除文字，就像<input type="text">一样，除了我不想使用它，因为它稍微有限对我来说。

我绝对可以使用JavaScript。

Answer 1

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

getElementById('YourDiv').contentEditable = true; 

Answer 2

我建议你使用一个文本，如果这还不够，使用所见即所得编辑器TinyMCE的一样或FCKeditor的。

Answer 3

您可以通过将其contentEditable属性/属性设置为true来使div可编辑。然而，对于任何稍微更强大或更灵活然后很基本的编辑功能，你可能想看看在如现有的解决方案：

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

Answer 4

CONTENTEDITABLE属性可用于此目的。以下代码行已在IE7和Firefox 3.0.10中测试过。其中一部分，我注意到这个属性只能用于小写;否则它不会在Firefox中工作。

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

Answer 5

，我理解你的问题，你可以通过添加textarea到您的div resove它。这是非常简单的，使textarea autosize占据整个div区域，看起来像这样div。

至于contentEditable，我看到一些浏览器，支持div -element这个功能，并没有。无论如何，你可以在你的div中使用iframe。这是document -element可以有contentEditable。

Answer 6

jQuery的可以使用这样的：

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