检查 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日

763 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告