contenteditable div not actually editable in webkit

contenteditable
mateolargo picture mateolargo · Nov 23, 2010 · Viewed 7.7k times · Source

I have a div with the contenteditable attribute set to to true, however, it does not show a blinking cursor or update when I type text into it. I've added event listeners for focus, keydown, and keypress to see if the div is receiving them, AND IT IS!

How could it be that all the appropriate events are actually firing yet the content of the div is not appropriately updating itself? I'm not doing anything funky like preventing the default behavior of the events.

Also, I've gotten contenteditable working just fine several times before on different projects, so I'm fairly certain it's some bug being caused by the structure of this particular page's HTML. Again, the issue only occurs in Chrome and Safari; Firefox and IE8 are fine.

Answer

mateolargo picture mateolargo · Nov 23, 2010

Okay, I figured out my problem. I had the css property '-webkit-user-select' set to none on an element way up the hierarchy of the div in question. Thus it was preventing the cursor from ever being positioned within my contentEditable div.

Interestingly, the corresponding '-moz-user-select' (which I also have set to none up the hierarchy) does not affect Firefox in the same way.

Related questions

contenteditable change events

I want to run a function when a user edits the content of a div with contenteditable attribute. What's the equivalent of an onchange event? I'm using jQuery so any solutions that uses jQuery is preferred. Thanks!

Read More
How to set caret(cursor) position in contenteditable element (div)?

I have this simple HTML as an example: <div id="editable" contenteditable="true"> text text text<br> text text text<br> text text text<br> </div> <button id="button"&…

Read More
Get contentEditable caret index position

I'm finding tons of good, crossbrowser anwers on how to SET the cursor or caret index position in a contentEditable element, but none on how to GET or find its index... What I want to do is know the index …

Read More