contenteditable

contenteditable 全局属性 是一个枚举属性,指示该元素是否应可由用户编辑。如果是这样,浏览器会修改其小部件以允许编辑。

¥The contenteditable global attribute is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing.

Try it

¥Value

该属性必须采用以下值之一:

¥The attribute must take one of the following values:

  • true 或空字符串,表示该元素是可编辑的。
  • false,表示该元素不可编辑。
  • plaintext-only,表示元素的原始文本是可编辑的,但富文本格式被禁用。

如果给定的属性没有值,例如 <label contenteditable>Example Label</label>,则其值将被视为空字符串。

¥If the attribute is given without a value, like <label contenteditable>Example Label</label>, its value is treated as an empty string.

如果此属性缺失或其值无效,则其值将从其父元素继承:因此,如果其父元素可编辑,则该元素也可编辑。

¥If this attribute is missing or its value is invalid, its value is inherited from its parent element: so the element is editable if its parent is editable.

请注意,虽然其允许值包括 truefalse,但该属性是 enumerated 属性而不是布尔属性。

¥Note that although its allowed values include true and false, this attribute is an enumerated one and not a Boolean one.

你可以使用 CSS caret-color 属性设置用于绘制文本插入 caret 的颜色。

¥You can set the color used to draw the text insertion caret with the CSS caret-color property.

通过使用 contenteditable 属性可编辑并因此可交互的元素可以成为焦点。它们参与顺序键盘导航。但是,默认情况下,嵌套在其他 contenteditable 元素中的具有 contenteditable 属性的元素不会添加到 Tab 键序列中。你可以通过指定 tabindex 值 (tabindex="0") 将嵌套的 contenteditable 元素添加到键盘导航序列。

¥Elements that are made editable, and therefore interactive, by using the contenteditable attribute can be focused. They participate in sequential keyboard navigation. However, elements with the contenteditable attribute nested within other contenteditable elements are not added to the tabbing sequence by default. You can add the nested contenteditable elements to the keyboard navigation sequence by specifying the tabindex value (tabindex="0").

规范

Specification
HTML Standard
# attr-contenteditable

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看