Question

我正在构建一个HTML5 webapp，我尝试使用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 可编辑。

Answer 2

对于稍后来到这里的人，我发现了问题。我还在<li>启用了可拖动属性，因此点击事件在到达<li>孩子之前被<label>个事件劫持。它在这里回答How can I enable 'draggable' on a element with contentEditable?。

HTML5 ContentEditable无法在Chrome中使用

2 个答案: