worldwide open-source software

Инструменты пользователя

Инструменты сайта

Вы посетили:
software:development:web:docs:web:html:global_attributes:contenteditable

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Следующая версия		Предыдущая версия
software:development:web:docs:web:html:global_attributes:contenteditable [2024/03/03 12:38] – создано vladpolskiysoftware:development:web:docs:web:html:global_attributes:contenteditable [2024/03/03 17:42] (текущий) – [HTML глобальный атрибут: contenteditable (редактируемый контент)] vladpolskiy
Строка 1: Строка 1:
 ====== HTML глобальный атрибут:  contenteditable (редактируемый контент) ====== ====== HTML глобальный атрибут:  contenteditable (редактируемый контент) ======
  
-[[software:development:web:docs:web:html:global_attributes|Глобальный атрибут]] **contenteditable ** это перечисляемый атрибут, указывающий, должен ли пользователь редактировать элемент. Если это так, браузер модифицирует свой виджет, чтобы разрешить редактирование.contenteditable+[[software:development:web:docs:web:html:global_attributes|Глобальный атрибут]] **contenteditable ** - это [[software:development:web:docs:glossary:enumerated|перечисляемый]] атрибут, указывающий, должен ли пользователь редактировать элемент. Если это так, браузер модифицирует свой виджет, чтобы разрешить редактирование.contenteditable
  
-Такую кнопку можно нажать сразу без перевода на неё фокуса, например, с помощью клавиатуры.+Можно удалять текст и вводить новый. Также работают стандартные команды вроде отмены, вставки текста из буфера и др.
  
 =====Интерактивный пример===== =====Интерактивный пример=====
Строка 21: Строка 21:
 <WRAP left round info 100%> <WRAP left round info 100%>
 **Примечание**\\   **Примечание**\\  
-  * ''Атрибут autofocus'' применяется ко всем элементам, а не только к элементам управления формой. Например, его можно использовать в редактируемой области. +Хотя допустимые значения включают trueи false, этот атрибут является [[software:development:web:docs:glossary:enumerated|перечислимым]], а не логическим .
-  * Не более одного элемента в документе или диалоге может иметь атрибут автофокуса. Если применить к нескольким элементам, фокус получит первый из них.+
 </WRAP> </WRAP>
  
Строка 28: Строка 27:
  
 <code> <code>
-<button autofocus>...</button>+contenteditable="true | false"
 </code> </code>
 +
  
 <code> <code>
-<input name="q" autofocus />+<h1 contenteditable="false">Редактирование запрещено</h1>
 </code> </code>
  
 <code> <code>
-<input type="..." autofocus> +  <p contenteditable="true">Редактирование разрешено</p>
-<input type="..." autofocus=""> +
-<input type="..." autofocus="autofocus">+
 </code> </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>]] 
  
 =====Доступность===== =====Доступность=====
  
-Автоматическая фокусировка элемента управления формой может сбить с толку людей с нарушениями зрения, использующих технологию чтения с экрана, и людей с когнитивными нарушениями. Если ''autofocus'' присвоено значение, программы чтения с экрана «телепортируют» пользователя в элемент управления формы, не предупреждая его заранее.+Вы можете установить цвет, используемый для рисования курсора вставки текста, с помощью [[software:development:web:docs:glossary:caret|Caret]] свойства CSS [[software:development:web:docs:web:css:caret-color|caret-color]].
  
-При применении атрибута уделяйте особое внимание доступности ''autofocus''. Автоматическая фокусировка на элементе управления может привести к прокрутке страницы при загрузке. Фокус также может привести к отображению динамической клавиатуры на некоторых сенсорных устройствах. В то время как программа чтения с экрана объявляет метку элемента управления формой, получающего фокус, программа чтения с экрана ничего не объявляет перед меткой, и зрячий пользователь на небольшом устройстве в равной степени пропустит контекст, созданный предыдущим содержимым.+Элементы, которые с помощью атрибута становятся редактируемыми и, следовательно, интерактивными, ''contenteditable'' могут быть сфокусированы. Они участвуют в последовательной навигации с помощью клавиатуры. Однако элементы с ''contenteditable'' атрибутом, вложенным в другие ''contenteditable'' элементы, по умолчанию не добавляются в последовательность табуляции. Вы можете добавить вложенные ''contenteditable'' элементы в последовательность навигации с помощью клавиатуры, указав значение ''tabindex'' ([[software:development:web:docs:web:html:global_attributes:tabindex|tabindex="0"]]).
  
 =====Ссылки и Дополнения===== =====Ссылки и Дополнения=====
-  * [[https://html.spec.whatwg.org/multipage/interaction.html#dom-fe-autofocus|Стандарт HTML]] +  * [[https://html.spec.whatwg.org/multipage/interaction.html#attr-contenteditable|Стандарт HTML # attr-contenteditable]] 
-  * [[https://programmerbook.ru/html/input/autofocus/|programmerbook.ru - Атрибут autofocus]] +  * [[https://programmerbook.ru/html/input/contenteditable/|programmerbook.ru - Атрибут contenteditable]] 
-  * [[https://htmlbook.ru/html/button/autofocus|htmlbook.ru - Атрибут autofocus]]+  * [[https://htmlbook.ru/html/attr/contenteditable|htmlbook.ru - Атрибут contenteditable]]
software/development/web/docs/web/html/global_attributes/contenteditable.1709458700.txt.gz · Последнее изменение: 2024/03/03 12:38 — vladpolskiy