contenteditable div not actually editable in webkit

16
votes

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.

2
contenteditable

2 Answers

41
votes

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.

22
votes

I'd like to share this code with you. It might help you out! You disable the user-select and callout for the whole site, and then override the contenteditable fields to allow user-select.

html,body{
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

*[contenteditable] {
    -webkit-user-select: auto !important;
}