HTML5 ContentEditable not working in Chrome

I am creating an HTML5 webapp, and I tried to use the content function to do in-place text editing, but for some reason I could not get the β€œedit” to work.

EDIT: I am using Chrome 12.0.xx

  • It highlights the element (I see it using CSS)
  • I also tested object.isContentEditablethat returnstrue
  • I tried to change <lable>to other elements, such as <div>, <p>, <span>nothing works. Only works <textarea>, but I assume it has nothing to do with HTML5 or the contenteditable attribute.
  • blur the event is fired when exiting edit mode (I can see from the debugger)

With some tips How do I find out why the contenteditable attribute is not working? I tried disabling all CSS, but no luck.

The only thing I am adding my elements is through javascript and not in the 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");
}
+3
source share
2 answers

it

document.createElement('label')

not 'lable'

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

The demonstration shows that LABEL is editable.

+4
source

, , . draggable <li>, click <li> <label>. "draggable" contentEditable?.

+2

All Articles