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");
}

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");
}

• javascript
• html
• google-chrome

• You don't need to supply the second argument to substring if you want to go to the end of the string. Just keyid.substring(startchar+1) is good. – Šime Vidas Commented Jun 12, 2011 at 23:07
• You know that addEventListener doesn't work in IE8, right? – Šime Vidas Commented Jun 12, 2011 at 23:09
• You know that innerText doesn't work in Firefox, right? – Šime Vidas Commented Jun 12, 2011 at 23:10
• Hi,thanks for letting me know.I changed code.Also,I am focusing on making this app for chrome, so IE8 is not issue for me right now.I will keep that in mind. – Pavan Keerthi Commented Jun 12, 2011 at 23:13

2 Answers 2

It's

document.createElement('label')

not 'lable'

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

The demo shows that the LABEL is editable.

For anyone ing 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?.