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+' ');
}

温馨提示:答案为网友推荐,仅供参考
第1个回答  2019-12-23

代替input的文本编辑器

有时,我们不想使用input/textarea,但又希望标签的内容支持编辑。这时,可以使用html5的contenteditable属性。
contenteditable是全局属性,可以放在任意标签上,如div,p ,span等

具体用法参考 可以编辑的div contenteditable

第2个回答  2013-01-05
焦点在那?
你想让按钮变成一个div?