Blog/content/posts/2023/html/contenteditable-placeholder.md

title	date	draft	tags
🏷️ Реализация placeholder для изменяемых HTML элементов	2023-03-27T23:45:00+03:00	false	development tips html css

Это очень просто

Не нужно слов, сразу показываю код!

HTML:

<p id="post-title" contenteditable="true" data-ph="Post title"></p>
<p id="post-dec"   contenteditable="true" data-ph="Post desc"></p>

CSS:

[contenteditable=true]:empty:not(:focus):before {
  content: attr(data-ph);
}

[contenteditable=true]:empty:before {
  content: attr(data-ph);
}

Разбор

В HTML реализована фича, которая позволяет изменять содержимое любого HTML элемента.

За это отвечает атрибут contenteditable.

Берём <div>, добавляет атрибут contenteditable="true" и получаем аналог <textarea> 😉

<div id="textarea" contenteditable="true" data-ph="Input text...">some text</div>

Однако, если очистить текст из элемента, он начинает скакать на странице и установка CSS свойств margin, padding и других вообще не помогает.

Нужно, чтобы в элементе «что-то было».

Реализовать это можно с помощью CSS свойста content.

[contenteditable=true]:empty:not(:focus):before {
  content: attr(data-ph);
}

[contenteditable=true]:empty:before {
  content: attr(data-ph);
}

Следующий код добавляет в тело элементов с атрибутом contenteditable=true значение из атрибута HTML элемента data-ph.

Псевдоклассы :empty и :not(:focus) проверяют что HTML тег пуст и не в фокусе.