contenteditable

版本：HTML5

一个枚举属性（enumerated attribute），表示元素是否可被用户编辑。如果可以，浏览器会调整元素的部件（widget）以允许编辑。true 或者空字符串，表明元素是可被编辑的；false，表明元素不能被编辑。

<blockquote contenteditable="true">
    <p>Edit this content to add your own quote</p>
</blockquote>

<cite contenteditable="true">-- Write your own name here</cite>
<style>
.output {
    font: 1rem 'Fira Sans', sans-serif;
}

blockquote {
    background: #eee;
    border-radius: 5px;
    margin: 16px 0;
}

blockquote p {
    padding: 15px;
}

cite {
    margin: 16px 32px;
}

blockquote p::before {
    content: '\201C';
}

blockquote p::after {
    content: '\201D';
}

[contenteditable='true'] {
    caret-color: red;
}

</style>

该属性必须是下面的值之一：

• true或空字符串，表示元素是可编辑的；
• false表示元素不是可编辑的。

如果没有设置该属性，其默认值继承自父元素。

该属性是一个枚举属性，而非布尔属性。这意味着必须显式设置其值为true、false或空字符串中的一个，并且不允许简写为<label contenteditable>Example Label</label>正确的用法是<label contenteditable="true">Example Label</label>。

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

浏览器支持

IE、火狐浏览器不支持，其余浏览器支持contenteditable属性