如何解决HTML5 ContentEditable无法在Chrome中使用
| 我正在构建HTML5 Web应用程序,并且尝试使用contenteditable功能对文本进行就地编辑,但是由于某种原因,我无法使“编辑”工作。 编辑:我正在使用Chrome 12.0.xx 它突出显示了Element(我可以通过CSS看到它) 我还测试了object.isContentEditable
返回returns1ѭ
我试图将<lable>
更改为elements3ѭ,<p>
,<span>
等其他元素,但没有任何效果。只有<textarea>
有用,但我猜想这与HTML5或contenteditable属性无关。
exit7ѭ事件在退出编辑模式时触发。(我可以从调试器中看到)
有一些疑问,我该如何找出为什么contenteditable属性不起作用?我试图关闭所有CSS,但是没有运气。
唯一的是,我通过javascript而不是HTML源添加了元素
JS代码:
var newLi =document.createElement(\"li\");
var newLable=document.createElement(\"lable\");
newLable.className=\"labletext\";
newLable.contentEditable=\"true\";
newLable.innerText=String(localStorage[\"task.\"+i+\".taskValue\"]);
newLable.addEventListener(\'blur\',editTask,false);
newLi.appendChild(newLable);
Parent.appendChild(newLi);
function editTask()
{
var keyid=this.id;
var startchar = keyid.lastIndexOf(\"_\");
var endchar=keyid.length;
var taskId=parseInt(keyid.substring(startchar+1,endchar));
localStorage.setItem(\"task.\"+taskId+\".taskValue\",this.innerText);
loadTasks(\"tasklist\");
}
解决方法
它的
document.createElement(\'label\')
不是\'lable\'
现场演示:http://jsfiddle.net/XuAfA/1/
该演示显示LABEL是可编辑的。
, 对于后来在这里遇到的任何人,我都发现了问题。我还在<li>
上启用了可拖动属性,因此click事件在到达<label>
子级之前被<li>
事件所劫持。它在这里回答了如何使用contentEditable在元素上启用“可拖动”?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。