Заполнитель для contenteditable div

У меня есть следующее: FIDDLE

Заполнитель работает отлично и модно, пока вы не наберете что-либо, ctrl kbd> + A kbd>, и удалить kbd>. Если вы сделаете это, заполнитель исчезнет и больше никогда не появится.

Что не так? Как я могу иметь заполнитель для contenteditable div?

HTML:


CSS:
.test {
    width: 500px;
    height: 70px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 5px;
}

.test[placeholder]:empty:before {
    content: attr(placeholder);
    color: #555; 
}


Спасибо.

57
задан 22 December 2013 в 08:30

1 ответ

Я создал живую демонстрацию: "Заполнитель для довольных доступных для редактирования отделений", HTML & CSS.
кроме того, Codepen: https://codepen.io/fritx/pen/NZpbqW
Касательно: https://github.com/fritx/vue-at/issues/39#issuecomment-504412421

.editor {
  border: solid 1px gray;
  width: 300px;
  height: 100px;
  padding: 6px;
  overflow: scroll;
}
[contenteditable][placeholder]:empty:before {
  content: attr(placeholder);
  position: absolute;
  color: gray;
  background-color: transparent;
}
<textarea class="editor"
  placeholder="Textarea placeholder..."
></textarea>
<br/>
<br/>
<div class="editor"
  contenteditable
  placeholder="Div placeholder..."
  oninput="if(this.innerHTML.trim()==='<br>')this.innerHTML=''"
></div>
3
ответ дан 1 November 2019 в 16:51

Другие вопросы по тегам:

Похожие вопросы: