div设置contenteditable="true"，即可编辑，我想做一个按钮，点击它之后，焦点处就自动出现一个可编辑的
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div设置contenteditable="true"，即可编辑，我想做一个按钮，点击它之后，焦点处就自动出现一个可编辑的相关的知识，希望对你有一定的参考价值。
div设置contenteditable="true"，即可编辑，我想做一个按钮，点击它之后，焦点处就自动出现一个可编辑的表格，这个按钮如何用js写呢？如果不能用js写，该如何实现这种功能呢？本人迫切需要实现这个功能，请高人指教！！！
将DIV对象的contenteditable属性设置为true之后,再插入一个表格,就能编辑了.代码如下:<body>
<div id="abc">abc</div><br>
<input type="button" onclick="javascript:doit();" value="Go!">
<script language="javascript">
function doit()
var abc=document.getElementById('abc');
abc.contentEditable=true;
abc.innerhtml+='<table border="1"><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr></table>'
</script>
</body>追问
刚才听“狂热1985”指教说div的标准属性只有id, class, title, style, dir, lang, xml:lang，没有我说的contenteditable="true"属性。我用了这个属性后，就是感觉在网页里进行编辑的时候，有点乱！请问：“如何让网页指定的某一部分可编辑呢？”就像这个“继续追问”的部分一样：不但可以让网友编辑文字，还可以点个“图片”按钮插入图片、点个“符号”按钮插入符号等，能设计个“表格”按钮，插入可编辑的表格吗？叩谢！！！
追答DIV的属性当然不只有这么几个,可用于DIV标签属性有二十几个,可用的脚本属性超过四十个,如果你想了解全部,可以下载一个HTML手册自己查.
你所说的就是在线富文本编辑器的功能,网上有很多类似的开源代码,比如CKEditor,eWebeditor就都可以动态编辑表格,你可以自己下载研究,但是通常这些编辑器都是使用的iframe,通过将body的contenteditable属性设为true来利用整个页面进行编辑,而不是用一个DIV做容器.
谢天谢地！您就是我的上帝！！！
我试过了，要的就是这个效果！只是表格的插入位置不对。您的代码把表格插入到了最后的位置。我是想把表格插入到“光标闪烁”的位置。
您一定能帮我解决这个问题！大恩师！！拜托您了！！！
正常情况下网页里是不会闪光标的,只有接受输入的焦点控件才会闪光标,但是你可以选中一部分内容,然后通过将选中内容进行替换来得到表格,如:
选中这段文字中的一部分,然后再点按钮.IE下有效.
function doit()
var abc=document.getElementById('abc');
abc.contentEditable=true;
var nRange=document.selection.createRange();
nRange.pasteHTML(nRange.htmlText+' ');
代替input的文本编辑器
有时，我们不想使用input/textarea，但又希望标签的内容支持编辑。这时，可以使用html5的contenteditable属性。
contenteditable是全局属性，可以放在任意标签上，如div，p ，span等
具体用法参考 可以编辑的div contenteditable
参考技术B 焦点在那？你想让按钮变成一个div？
以上是关于div设置contenteditable="true"，即可编辑，我想做一个按钮，点击它之后，焦点处就自动出现一个可编辑的的主要内容，如果未能解决你的问题，请参考以下文章
在 contenteditable div 中的特定位置设置插入符号位置
将焦点设置在 div contenteditable 元素上
将插入符号位置设置为始终以 contenteditable div 结尾 [重复]
div设置contenteditable="true"，即可编辑，我想做一个按钮，点击它之后，焦点处就自动出现一个可编辑的