user-select:none breaking Safari contenteditable

Question

I have a div with contenteditable="true". I can enter text into the div with IE, Chrome and Firefox but not Safari. I finally tracked the problem down to the style declarations below given to the container of the div.

container {
    -webkit-user-select : none;
    -moz-user-select    : none;
    -khtml-user-select  : none;
    -ms-user-select     : none;  
}

I put these in a while ago per Chrome taking first double-click to keep the container from turning blue when it was double-clicked. Now I'm just finding out that that solution breaks Safari contenteditable.

Does anyone know exactly what these things are doing and why they break Safari contenteditable?

Answer 1

user-select

This property controls the actual Selection operation⁰. This is useful in situations where you want to provide an easier/cleaner copy-paste experience for users (not have them accidentally text-select useless things, like icons or images).¹

Example of how the property works: http://jsfiddle.net/chriscoyier/vGG8F/3/

Possible Solutions

Since Safari is built on webkit -webkit-user-select : none; is the culprit. Removing that will allow the contenteditable to work again. However, you need that due to your original problem.

1. Others have run into the same problem which may provide a solution.

   • contenteditable div not actually editable in webkit
   • Losing selected text from contenteditable on clicking div with css user-select: none;
   • ContentEditable focus in Chrome/Safari

2. You could also catch the double click as suggested in your first question and then disable the -webkit-user-select allowing the div to be editable. Once the editing is complete -webkit-user-select could be set back to none.

⁰ https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
¹ http://css-tricks.com/almanac/properties/u/user-select/