worldwide open-source software

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== HTML глобальный атрибут:  contenteditable (редактируемый контент) ======

[[software:development:web:docs:web:html:global_attributes|Глобальный атрибут]] **contenteditable ** - это [[software:development:web:docs:glossary:enumerated|перечисляемый]] атрибут, указывающий, должен ли пользователь редактировать элемент. Если это так, браузер модифицирует свой виджет, чтобы разрешить редактирование.contenteditable

Можно удалять текст и вводить новый. Также работают стандартные команды вроде отмены, вставки текста из буфера и др.

=====Интерактивный пример=====

<html>
<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/global_attributes/contenteditable.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>
</html>

<html>
<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/global_attributes/contenteditable_1.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>
</html>

=====Использование=====

<WRAP left round info 100%>
**Примечание**\\  
Хотя допустимые значения включают trueи false, этот атрибут является [[software:development:web:docs:glossary:enumerated|перечислимым]], а не логическим .
</WRAP>

=====Синтаксис=====

<code>
contenteditable="true | false"
</code>


<code>
<h1 contenteditable="false">Редактирование запрещено</h1>
</code>

<code>
  <p contenteditable="true">Редактирование разрешено</p>
</code>

=====Значения атрибута=====
  * **true** или **пустая строка**-   Включает режим редактирования.
  * **false** -   Запрещает редактирование элемента.
  * **plaintext-only**, что указывает на то, что необработанный текст элемента доступен для редактирования, но форматирование расширенного текста отключено.

Вместо **true** допустимо указывать пустое значение (contenteditable="") или вообще его не писать (contenteditable).

Значение по умолчанию: По умолчанию наследует значение родителя.

Если этот атрибут отсутствует или его значение недопустимо, его значение наследуется от родительского элемента: поэтому элемент доступен для редактирования, если его родительский элемент доступен для редактирования.

=====Применяется к тегам=====

[[software:development:web:docs:web:html:element:a|<a>]], 
[[software:development:web:docs:web:html:element:abbr|<abbr>]], 
[[software:development:web:docs:web:html:element:area|<area>]],             
[[software:development:web:docs:web:html:element:article|<article>]],     
[[software:development:web:docs:web:html:element:aside|<aside>]],             
[[software:development:web:docs:web:html:element:audio|<audio>]],          
[[software:development:web:docs:web:html:element:b|<b>]],               
[[software:development:web:docs:web:html:element:basefont|<basefont>]], 
[[software:development:web:docs:web:html:element:bdo|<bdo>]], 
[[software:development:web:docs:web:html:element:blockquote|<blockquote>]], 
[[software:development:web:docs:web:html:element:body|<body>]],                 
[[software:development:web:docs:web:html:element:button|<button>]],              
[[software:development:web:docs:web:html:element:caption|<caption>]],               
[[software:development:web:docs:web:html:element:cite|<cite>]], 
[[software:development:web:docs:web:html:element:code|<code>]], 
[[software:development:web:docs:web:html:element:col|<col>]], 
[[software:development:web:docs:web:html:element:colgroup|<colgroup>]], 
[[software:development:web:docs:web:html:element:dd|<dd>]],                
[[software:development:web:docs:web:html:element:dfn|<dfn>]], 
[[software:development:web:docs:web:html:element:dir|<dir>]] {{:icons:16:hourglass-select.png?|Устаревший. Не для использования на новых web-сайтах.}}, 
[[software:development:web:docs:web:html:element:div|<div>]], 
[[software:development:web:docs:web:html:element:dl|<dl>]], 
[[software:development:web:docs:web:html:element:dt|<dt>]], 
[[software:development:web:docs:web:html:element:em|<em>]], 
[[software:development:web:docs:web:html:element:fieldset|<fieldset>]], 
[[software:development:web:docs:web:html:element:h1|<h1>]], 
[[software:development:web:docs:web:html:element:h1|<h2>]], 
[[software:development:web:docs:web:html:element:h1|<h3>]], 
[[software:development:web:docs:web:html:element:h1|<h4>]], 
[[software:development:web:docs:web:html:element:h1|<h5>]], 
[[software:development:web:docs:web:html:element:i|<i>]],          
[[software:development:web:docs:web:html:element:input|<input>]],        
[[software:development:web:docs:web:html:element:ins|<ins>]],           
[[software:development:web:docs:web:html:element:kbd|<kbd>]],           
[[software:development:web:docs:web:html:element:label|<label>]],        
[[software:development:web:docs:web:html:element:legend|<legend>]],      
[[software:development:web:docs:web:html:element:li|<li>]],             
[[software:development:web:docs:web:html:element:menu|<menu>]],             
[[software:development:web:docs:web:html:element:ol|<ol>]],              
[[software:development:web:docs:web:html:element:option|<option>]],        
[[software:development:web:docs:web:html:element:pre|<pre>]],            
[[software:development:web:docs:web:html:element:q|<q>]],              
[[software:development:web:docs:web:html:element:samp|<samp>]],           
[[software:development:web:docs:web:html:element:select|<select>]],          
[[software:development:web:docs:web:html:element:span|<span>]],          
[[software:development:web:docs:web:html:element:strong|<strong>]],       
[[software:development:web:docs:web:html:element:sub|<sub>]],          
[[software:development:web:docs:web:html:element:sup|<sup>]],             
[[software:development:web:docs:web:html:element:table|<table>]],        
[[software:development:web:docs:web:html:element:tbody|<tbody>]],         
[[software:development:web:docs:web:html:element:td|<td>]],               
[[software:development:web:docs:web:html:element:textarea|<textarea>]],    
[[software:development:web:docs:web:html:element:tr|<tr>]],            
[[software:development:web:docs:web:html:element:ul|<ul>]],       
[[software:development:web:docs:web:html:element:var|<var>]] 

=====Доступность=====

Вы можете установить цвет, используемый для рисования курсора вставки текста, с помощью [[software:development:web:docs:glossary:caret|Caret]] свойства CSS [[software:development:web:docs:web:css:caret-color|caret-color]].

Элементы, которые с помощью атрибута становятся редактируемыми и, следовательно, интерактивными, ''contenteditable'' могут быть сфокусированы. Они участвуют в последовательной навигации с помощью клавиатуры. Однако элементы с ''contenteditable'' атрибутом, вложенным в другие ''contenteditable'' элементы, по умолчанию не добавляются в последовательность табуляции. Вы можете добавить вложенные ''contenteditable'' элементы в последовательность навигации с помощью клавиатуры, указав значение ''tabindex'' ([[software:development:web:docs:web:html:global_attributes:tabindex|tabindex="0"]]).

=====Ссылки и Дополнения=====
  * [[https://html.spec.whatwg.org/multipage/interaction.html#attr-contenteditable|Стандарт HTML # attr-contenteditable]]
  * [[https://programmerbook.ru/html/input/contenteditable/|programmerbook.ru - Атрибут contenteditable]]
  * [[https://htmlbook.ru/html/attr/contenteditable|htmlbook.ru - Атрибут contenteditable]]