Содержание
HTML глобальный атрибут: contenteditable (редактируемый контент)
Глобальный атрибут contenteditable - это перечисляемый атрибут, указывающий, должен ли пользователь редактировать элемент. Если это так, браузер модифицирует свой виджет, чтобы разрешить редактирование.contenteditable
Можно удалять текст и вводить новый. Также работают стандартные команды вроде отмены, вставки текста из буфера и др.
Интерактивный пример
Использование
Примечание
Хотя допустимые значения включают trueи false, этот атрибут является перечислимым, а не логическим .
Синтаксис
contenteditable="true | false"
<h1 contenteditable="false">Редактирование запрещено</h1>
<p contenteditable="true">Редактирование разрешено</p>
Значения атрибута
- true или пустая строка- Включает режим редактирования.
- false - Запрещает редактирование элемента.
- plaintext-only, что указывает на то, что необработанный текст элемента доступен для редактирования, но форматирование расширенного текста отключено.
Вместо true допустимо указывать пустое значение (contenteditable=«») или вообще его не писать (contenteditable).
Значение по умолчанию: По умолчанию наследует значение родителя.
Если этот атрибут отсутствует или его значение недопустимо, его значение наследуется от родительского элемента: поэтому элемент доступен для редактирования, если его родительский элемент доступен для редактирования.
Применяется к тегам
<a>,
<abbr>,
<area>,
<article>,
<aside>,
<audio>,
<b>,
<basefont>,
<bdo>,
<blockquote>,
<body>,
<button>,
<caption>,
<cite>,
<code>,
<col>,
<colgroup>,
<dd>,
<dfn>,
<dir> 
,
<div>,
<dl>,
<dt>,
<em>,
<fieldset>,
<h1>,
<h2>,
<h3>,
<h4>,
<h5>,
<i>,
<input>,
<ins>,
<kbd>,
<label>,
<legend>,
<li>,
<menu>,
<ol>,
<option>,
<pre>,
<q>,
<samp>,
<select>,
<span>,
<strong>,
<sub>,
<sup>,
<table>,
<tbody>,
<td>,
<textarea>,
<tr>,
<ul>,
<var>
Доступность
Вы можете установить цвет, используемый для рисования курсора вставки текста, с помощью Caret свойства CSS caret-color.
Элементы, которые с помощью атрибута становятся редактируемыми и, следовательно, интерактивными, contenteditable могут быть сфокусированы. Они участвуют в последовательной навигации с помощью клавиатуры. Однако элементы с contenteditable атрибутом, вложенным в другие contenteditable элементы, по умолчанию не добавляются в последовательность табуляции. Вы можете добавить вложенные contenteditable элементы в последовательность навигации с помощью клавиатуры, указав значение tabindex (tabindex="0").