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

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, Jun 12 '11 at 23:07
You know that `addEventListener` doesn't work in IE8, right? — Šime Vidas, Jun 12 '11 at 23:09
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, Jun 12 '11 at 23:13

Šime Vidas · Accepted Answer · 2011-06-12T23:20:14.013

4

It's

document.createElement('label')

not 'lable'

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

The demo shows that the LABEL is editable.

edited Jun 12 '11 at 23:20

answered Jun 12 '11 at 23:03

Šime Vidas

182,163
62
281
385

Hi,I just tried this and in chrome it doesn't work.Even blur event doesn't get fired.with Lable atleast highlight happens and blur event gets fired. I also tired same in IE9 and both label and lable works fine and content is editable. – Pavan Keerthi Jun 12 '11 at 23:29
I checked your demo and its fine in chrome.I must be doing something wrong.I will look at things again.thanks for your help – Pavan Keerthi Jun 12 '11 at 23:30
Found the issue.I also enable draggable attribute on
hence click event is hijacked
before reaching . Its answered here http://stackoverflow.com/questions/4954994/how-can-i-enable-draggable-on-a-element-with-contenteditable

Pavan Keerthi

Jun 12 '11 at 23:48

Found the issue.I also enabled draggable attribute on

hence click event is hijacked by

(I use jquery) before reaching . Its answered here http://stackoverflow.com/questions/4954994/how-can-i-enable-draggable-on-a-element-with-contenteditable

– Pavan Keerthi Jun 12 '11 at 23:59

score 2 · Answer 2 · edited May 23 '17 at 12:08

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?.

edited May 23 '17 at 12:08

Community

1
1

answered Jun 13 '11 at 11:35

Pavan Keerthi

1,471
3
17
22

HTML5 ContentEditable not working in Chrome

2 Answers2