10

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?

Community
  • 1
  • 1
Steve
  • 4,534
  • 9
  • 52
  • 110

4 Answers4

20

user-select

This property controls the actual Selection operation0. 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).1

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.

  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.

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

Community
  • 1
  • 1
JSuar
  • 21,056
  • 4
  • 39
  • 83
  • Wow! You nailed it! How can I just send all my questions to you? :) – Steve Jan 06 '14 at 04:34
  • 1
    Just wanted to make sure you got the 50 points ok. My points seemed to pop back up awfully quick and it's possible I didn't click something I should have to give you the points. (All I did was click the check mark for your answer.) – Steve Jan 09 '14 at 19:58
2

Use CSS pseudo-element ::selection. Chrome, for example, supports it from version 1.

Alex
  • 11,115
  • 12
  • 51
  • 64
2

Let me add a bit to JSuar's answer. Not only -webkit-user-select: none; kills the contenteditables, but -khtml-user-select: none; also does. However, setting explicit -webkit-user-select: text; or -webkit-user-select: auto; does the job disabling both of them.

UndeadBane
  • 443
  • 5
  • 7
0

I found a solution which works for me.

*[contenteditable]:empty {
    caret-color: rgba(0,0,0,0);
}

Then either animate the left border flashing or simply style the input in a way which indicates focus.

Deggen
  • 91
  • 1
  • 2