contenteditable 是 HTML5 中新增的一个全局属性，它可以让元素变得可编辑，支持在线编辑。它的值可以是 true 或 false，默认为 false。当 contenteditable 的值为 true 时，元素内容可以被用户编辑；当 contenteditable 的值为 false 时，元素内容不能被用户编辑。
<div contenteditable="true">这里的内容可以被用户修改</div>
contenteditable 属性有助于开发者创建一些在线文本编辑工具，例如在线文本编辑器、富文本编辑器、WYSIWYG 等。使用 contenteditable 属性开发者无需使用 JavaScript 就能够创建出一些功能强大的在线文本工具。
contenteditable 属性也可以用来创建一些在线表格工具，例如表格单元格的内容也是可以通过 contenteditable 属性来进行修改的。
<table>
<tr>
<td contenteditable="true">单元格1</td>
<td contenteditable="true">单元格2</td>
</tr>
<tr>
<td contenteditable="true">单元格3</td>
<td contenteditable="true">HTML全局属性contenteditable
HTML全局属性contenteditable
contenteditable 属性是HTML5中的新特性允许用户更改页面中的内容。
以下示例显示如何使用 contenteditable 属性。
HTML5中的新功能
contenteditable 属性是HTML5中的新功能。
句法
<element contenteditable="true|false">
属性值
- true
- set element to editable
- false
- set element to not editable
浏览器兼容性
contenteditableYes
Yes
Yes
Yes
Yes
例子
<!DOCTYPE HTML>
<html>
<body>
<p contenteditable="true">It is raining right now</p>
</body>
</html>
Click to view the demo
上面的代码应用 contenteditable 属性到 p 元素。
上面的代码应用 contenteditable 属性到 p 元素。...
如果您不指定值，则元素从其中继承此属性的设置父母。
用户点击文本并开始输入。
HTML data-* 属性 HTML 全局属性实例使用 data-* 属性来嵌入自定义数据：ulli data-animal-type="bird"Owl/lilidata-animal-type...
HTML canvas textBaseline 属性 HTML canvas 参考手册实例在 y=100 处绘制一条红线，然后在 y=100 处用不同的 textBaseline 值放...
HTML 音频/视频 DOM controls 属性HTML 音频/视频 DOM 参考手册实例为视频启动控件：myVid=document.getElementById("video1");m...
HTML 音频/视频 DOM durationchange 事件 HTML 音频/视频 DOM 参考手册实例提示视频的时长已改变：myVid=document.getElementByI...
HTML canvas lineTo() 方法 HTML canvas 参考手册实例开始一条路径，移动到位置 0,0。创建到达位置 300,150 的一条线：var c=doc...