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

---
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 тег пуст и не в фокусе.