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