HTML5 ContentEditable not working in Chrome

Question

I am building a HTML5 webapp and I tried using contenteditable feature to make a in-place edit of text,but for some reason I couldn't get "editing" to work.

EDIT: I am using Chrome 12.0.xx

• It highlights the Element(I can see it by CSS)
• I also tested object.isContentEditable which returns true
• I tried changing <lable> to other elements like <div>,<p>,<span> nothing works.Only <textarea> works but I am guessing that has got nothing to do with HTML5 or contenteditable attribute.
• blur event gets fired on exit of edit mode.(I can see from debugger)

With some clue in question How do I figure out why the contenteditable attribute doesn't work? I tried turning off of all CSS but no luck.

The only thing is, I am adding my elements via javascript rather that HTML source

JS Code:

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

It's

document.createElement('label')

not 'lable'

Live demo: http://jsfiddle.net/XuAfA/1/

The demo shows that the LABEL is editable.

Answer 2

For anyone coming later here,I Found the issue.I also enabled draggable attribute on <li> hence click event is hijacked by <li> events before reaching <label> child. Its answered here How can I enable 'draggable' on a element with contentEditable?.