javascript - 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 是可编辑的。