检查HTML元素内容是否可编辑

`contenteditable` 属性指示元素的内容是否可编辑。如果内容可编辑，浏览器将允许通过修改其组件来进行编辑。

此属性必须始终采用以下两个值之一：

  • **true** 或空字符串 - 表示内容可编辑

  • **false** - 表示内容不可编辑

如果属性未采用上述任何值，则声明为空字符串，默认情况下将成为可编辑内容。

**注意** - 如果元素的 `contenteditable` 属性未设置或无效，则其值将从其父元素继承；这意味着如果父元素可编辑，则该元素也可编辑。

语法

HTMLElementObject.contentEditable=true|false

以下是一些例子……

示例：带有“true”属性值

在下面的例子中，我们使用 `contenteditable` 属性并将值设置为“true”以使我们的文本可编辑。

<!DOCTYPE html>
<html>
<body>
   <h1>It Is Editable,Try To Change This Text.</h1>
   <p contenteditable="true">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</body>
</html>

输出

执行上述脚本后，它将启用文本，允许我们进行更改或使文本可编辑，因为我们将 `contenteditable` 设置为 true。

示例：带有“false”属性值

在下面的例子中，我们使用 `contenteditable` 属性并将值设置为“true”以使我们的文本可编辑。

<!DOCTYPE html>
<html>
<body>
   <h1>It Is Not Editable; Try To Change This Text.</h1>
   <p contenteditable="false">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</body>
</html>

输出

执行上述脚本后，它不会启用文本更改或使文本可编辑，因为我们将 `contenteditable` 设置为 false。

示例：使用Javascript

在下面的例子中，我们使用 `contenteditable` 属性值设置为“true”以使我们的文本可编辑。

<!DOCTYPE html>
<html>
<body>
   <h1>find out if text editable</h1>
   <p id="varma" contenteditable="true">We have established a Digital Content Marketplace to sell Video Courses and eBooks at a very nominal cost. You will have to register to avail these premium services.</p>
   <button onclick="myFunction()">Try it</button>
   <script>
      function myFunction() {
         var x = document.getElementById("varma").contentEditable;
      }
   </script>
</body>
</html>

输出

脚本执行时，它会触发 `contenteditable` 并使文本可编辑或进行更改，因为我们将 `contenteditable` 值设置为 true。

类似的 JavaScript 代码通过将 `contenteditable` 属性的参数设置为“false”来使文本不可编辑。

更新于：2022年9月5日

764 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告