定义和使用
contentEditable 属性用于设置或返回元素的内容是否可编辑。
提示： 你也可以使用 isContentEditable 属性来查看元素的内容是否可编辑。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器的版本号。
| 属性 | 谷歌 | IE | 火狐 | 苹果 | opera |
|---|---|---|---|---|---|
| contentEditable | 11.0 | 5.5 | 3.0 | 3.2 | 10.6 |
语法
返回 contentEditable 属性：
HTMLElementObject.contentEditable设置 contentEditable 属性：
HTMLElementObject.contentEditable=true|false属性值
| 值 | 描述 |
|---|---|
| true|false | 描述元素的内容是否可编辑。 可能值：inherit – 默认。如果父级元素是可编辑，则子元素内容也是可编辑的。 true – 内容可编辑 false – 内容不可编辑 |
技术细节
| 返回值: | 布尔值，如果元素是可编辑的返回 true，否则返回 false |
|---|
实例
设置 <p> 元素内容为可编辑：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
</head>
<body>
<p id="myP">这是个段落，点击按钮使该段落可编辑。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("myP").contentEditable = true;
document.getElementById("demo").innerHTML = "以上 p 元素现在可编辑，尝试修改文本。";
}
</script>
</body>
</html>查看 <p> 元素是否可编辑：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
</head>
<body>
<p id="myP" contenteditable="true">点击按钮查看该段落是否可编辑。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myP").contentEditable;
document.getElementById("demo").innerHTML = x + " = p 元素可编辑，修改文本，查看效果。";
}
</script>
</body>
</html>切换 <p> 元素的编辑状态：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
</head>
<body>
<p id="myP" contenteditable="true">尝试修改文本。</p>
<button onclick="myFunction(this);">禁用文本可编辑!</button>
<p id="demo"></p>
<script>
function myFunction(button) {
var x = document.getElementById("myP");
if (x.contentEditable == "true") {
x.contentEditable = "false";
button.innerHTML = "启用 p 元素内容编辑！";
} else {
x.contentEditable = "true";
button.innerHTML = "禁用 p 元素内容编辑！";
}
}
</script>
</body>
</html>作者：terry，如若转载，请注明出处：https://www.web176.com/javascriptbook/domtips/4367.html
支付宝 
微信 