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