ContentEditable Placeholder Issue

Question

Я следил за тем, как создать местозаполнитель для div [contenteditable].

Мой код выглядит следующим образом: http://jsfiddle.net/sdxjgkzm/

$('div[data-placeholder]').on 'keydown input', -> 
if (this.textContent) 
    this.dataset.divPlaceholderContent = 'true' 
else 
    delete(this.dataset.divPlaceholderContent) 

К сожалению, проблема заключается в том, что, как вы можете видеть заполнитель стандартного входного потока в остается до тех пор, пока не начнется набор текста, в то время как contenteditable идет прочь, как только вы щелкните внутри.

Как исправить это?

Answer 1

измените свой html немного, а затем используйте css css: используйте placeholder вместо data-placeholder i.e без атрибута данных.

input,div { 
 
    border: 1px black solid; 
 
    margin-top: 20px; 
 
} 
 

 
[contenteditable=true]:empty:before { 
 
    content: attr(placeholder); 
 
}

<input placeholder="test"/> 
 
<div contenteditable='true' placeholder="test"></div>

Answer 2

Проверьте это, CSS только :)

Placeholder support for contentEditable elements, without JavaScript

Обновлено Fiddle: enter link description here

Все, что вам нужно, это добавить следующий CSS:

[contenteditable=true]:empty:before { 
 
    content: attr(placeholder); 
 
    display: block; /* For Firefox */ 
 
} 
 
/* General Styling for Demo only */ 
 
div[contenteditable=true] { 
 
    border: 1px dashed #AAA; 
 
    width: 290px; 
 
    padding: 5px; 
 
} 
 
pre { 
 
    background: #EEE; 
 
    padding: 5px; 
 
    width: 290px; 
 
}

<h3>Placeholder support for contentEditable elements,<br>without JavaScript!</h3> 
 

 
<h5>Demo:</h5> 
 
<div contenteditable="true" placeholder="Enter text here..."></div> 
 

 
<p>All you need is to add the following CSS:</p> 
 
<pre> 
 
[contenteditable=true]:empty:before { 
 
    content: attr(placeholder); 
 
    display: block; /* For Firefox */ 
 
} 
 
</pre> 
 

 
<h5>Notes</h5> 
 
<ul> 
 
    <li>Can add a different style than actual text like opacity, italic, etc</li> 
 
    <li>If your html needs to be 100% compliant, you can replace "placeholder" for "data-placeholder" on both files</li> 
 
    <li>Chrome will add &lt;br />'s inside contentEditable elements in some cases, breaking the :empty check. Can be fixed with a bit of JavaScript.</li> 
 
</ul> 
 

 
<i>By Ariel Flesler</i>