From 6fbe746846f2d78370aa4033f12ba144e921ee98 Mon Sep 17 00:00:00 2001
From: Alexander Popov <iiiypuk@fastmail.fm>
Date: Mon, 27 Mar 2023 23:45:25 +0300
Subject: [PATCH] contenteditable placeholder

---
 .../2023/html/contenteditable-placeholder.md  | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 content/posts/2023/html/contenteditable-placeholder.md

diff --git a/content/posts/2023/html/contenteditable-placeholder.md b/content/posts/2023/html/contenteditable-placeholder.md
new file mode 100644
index 0000000..676a6fe
--- /dev/null
+++ b/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 тег пуст и не в фокусе.