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