contenteditable placeholder

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

@@ -0,0 +1,66 @@
+---
+title: "🏷️ Реализация placeholder для изменяемых HTML элементов"
+date: 2023-03-27T23:45:00+03:00
+draft: false
+tags: [development, tips, html, css]
+---
+
+## Это очень просто
+
+Не нужно слов, сразу показываю код!
+
+**HTML:**
+
+```html
+<p id="post-title" contenteditable="true" data-ph="Post title"></p>
+<p id="post-dec"   contenteditable="true" data-ph="Post desc"></p>
+```
+
+**CSS:**
+
+```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>` 😉
+
+```html
+<div id="textarea" contenteditable="true" data-ph="Input text...">some text</div>
+```
+
+Однако, если очистить текст из элемента,
+он начинает скакать на странице и установка CSS свойств
+`margin`, `padding` и других вообще не помогает.
+
+Нужно, чтобы в элементе «что-то было».
+
+Реализовать это можно с помощью CSS свойста `content`.
+
+```css
+[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 тег пуст и не в фокусе.