HTML5 ContentEditable 在 Chrome 中不起作用

Question

我正在构建一个 HTML5 网络应用程序，我尝试使用 contenteditable 功能对文本进行就地编辑，但由于某种原因，我无法让“编辑”工作。

编辑：我使用的是 Chrome 12.0.xx

• 突出显示元素（我可以通过 CSS 看到）
• 我还测试了object.isContentEditable，它返回true
• 我尝试将<lable> 更改为<div>、<p>、<span> 等其他元素，但没有任何效果。只有<textarea> 有效，但我猜这与HTML5 或contenteditable 属性无关。李>
• blur 事件在退出编辑模式时被触发。（我可以从调试器中看到）

有一些线索有问题How do I figure out why the contenteditable attribute doesn't work? 我尝试关闭所有 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");
}

Answer 1

这是

document.createElement('label')

不是'lable'

现场演示： http://jsfiddle.net/XuAfA/1/

演示显示 LABEL 是可编辑的。