Можно ли добавить placeholder в тег div

Я хотел бы отобразить некоторый текст для пользователя, когда мой элемент div пуст.

Я попытался добавить атрибут placeholder к моему div, но текст не отображается.

<div placeholder="Enter the text"> </div>

Как я могу отобразить сообщение, когда мой элемент div пуст?

Ответы

Ответ 1

Есть много вариантов использования javascript, но если вы хотите сделать это в css.Try:

HTML:

<div contentEditable=true data-text="Enter text here"></div>

CSS:

[contentEditable=true]:empty:not(:focus):before{
    content:attr(data-text)
}

Демо

Ответ 2

Я уже ответил на такой вопрос здесь с этим тестом: http://codepen.io/gcyrillus/pen/hzLIE

div:empty:before {
  content:attr(data-placeholder);
  color:gray
}

см. Если редактируемый div не имеет текста, чем установленный заполнитель

Ответ 3

Это также может быть достигнуто без использования атрибута contentEditable, используя простой CSS.

Используя :empty псевдокласс вместе с ::before псевдоэлемент, вы можете добавить местозаполнитель в пустой элемент.

В следующем примере приведен резервный заполнитель для div элементов, которые не имеют атрибута data-placeholder.

Пример:

div:empty::before {
  color: grey;
}
div[data-placeholder]:not([data-placeholder=""]):empty::before {
  content: attr(data-placeholder);
}
div:empty::before {
  content: 'fallback placeholder';
}

<div data-placeholder='data- placeholder'></div>
<br>
<div></div>

Ответ 4

Предполагая, что вы действительно хотите сделать, нужно, чтобы пользователь вводил какой-то текст и показывал ему какой-то заполнитель в поле ввода, это то, что вы можете использовать:

<input type="text" value="Enter the text" onfocus="if(this.value=='Enter the text'){this.value='';}" onblur="if(this.value==''){this.value='Enter the text';}" />

Конечно, вы можете обернуть ввод в div.

<div><input [...] /></div>

Вы можете видеть это в действии здесь