HTML DOM contentEditable 属性

元素对象

设置 <p> 元素内容为可编辑:

<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>

尝试一下 »

---

定义和使用

contentEditable 属性用于设置或返回元素的内容是否可编辑。

提示： 你也可以使用 isContentEditable 属性来查看元素的内容是否可编辑。

---

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

属性
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> 元素是否可编辑:

<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>

尝试一下 »

切换 <p> 元素的编辑状态：

<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>

尝试一下 »

---

相关页面

HTML 参考手册: HTML contenteditable 属性

---

元素对象