Если нужно добавить на страницу поле для редактирования текста, можно использовать атрибут
Чтобы ограничить ввод только текстом, можно использовать значение
Дополнительно можно ловить события
Подробнее о тонкостях работы с
#html
contenteditable
, как более приятную замену textarea
(для полей больших форм это не очень хорошая замена). Чтобы ограничить ввод только текстом, можно использовать значение
plaintext-only
у атрибута contenteditable
. Это предотвратит вставку HTML
-разметки, картинок или стилей.<div
contenteditable="plaintext-only"
data-placeholder="Начните печатать..."
></div>
Дополнительно можно ловить события
input
и paste
, чтобы очищать текст от случайного форматирования. Например, при вставке можно заменить HTML
-содержимое на обычный текст через e.clipboardData.getData('text/plain')
.Подробнее о тонкостях работы с
contenteditable
в статье на web.dev#html
web.dev
The contenteditable "plaintext-only" attribute value combination is now Baseline Newly available | Blog | web.dev
The contenteditable "plaintext-only" attribute value combination is now Baseline Newly available. Making an element contenteditable but plaintext-only has advantages over using a textarea in some cases highlighted in this post.
🔥16❤1