HTML5 ContentEditable не работает в Chrome

Question

Я создаю веб-приложение HTML5 и попытался использовать contenteditable функцию для редактирования текста на месте, но по какой-то причине я не смог заставить работать «редактирование».

РЕДАКТИРОВАТЬ: я использую Chrome 12.0.xx

• Он выделяет элемент (я вижу это по CSS)
• Я также протестировал object.isContentEditable, который возвращаетtrue
• Я пытался изменить <lable> на другие элементы, такие как <div>, <p>, <span>, ничего не работает. Только <textarea> работает, но я предполагаю, что это не имеет ничего общего с HTML5или атрибут contenteditable.
• blur Событие запускается при выходе из режима редактирования. (Я вижу из отладчика)

С некоторой подсказкой Как мне определитьпочему атрибут 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");
}

Answer 1

Это

document.createElement('label')

не 'lable'

Демо: http://jsfiddle.net/XuAfA/1/

Демонстрация показывает, что LABEL можно редактировать .

Answer 2

Для всех, кто придет позже, я обнаружил проблему. Я также включил перетаскиваемый атрибут на <li>, следовательно, событие щелчка перехватывается событиями <li> до достижения <label> потомка. Здесь ответили Как включить «перетаскивание» для элемента с contentEditable? .