1

I wanted to add a behavior for input with placeholder to a contenteditable field.

Not a problem and it is done with the following CSS

<div contentEditable="true" data-placeholder="Title"></div>
[contentEditable=true]:empty:not(:focus):before{
  content:attr(data-placeholder);
  color:grey;
}

which is for every element with an attribute contenteditable that is true and also does not have children and not focused insert a text that is equal to the text in data-placholder.

JsFiddle is available. On FF, Chrome and IE 11 it works nice, but in Safari (from 5 to 7) I see the following bug. When I click:

  • click on editable
  • write something
  • click away (it works properly)
  • then go back to contenteditable
  • remove all the text
  • click away

Than my contenteditable is empty. (In all other browser it has Title inside). Note that if you just click on editable and clickaway, it behaves correctly.

No idea why it behaves this way and also how to fix it.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Salvador Dali
  • 214,103
  • 147
  • 703
  • 753

1 Answers1

2

This is a known issue where the element does not register as being empty. You can fix it with a simple jquery function call to empty the element:

$input.empty();

See this answer for a detailed explaination.

Here your working jsfiddle.

Community
  • 1
  • 1
pschueller
  • 4,362
  • 2
  • 27
  • 50