HTML - contenteditable 属性

HTML 的 **contenteditable** 属性是一个全局属性，它指定元素的内容是否可编辑。

如果在任何元素上都没有定义 contenteditable 属性，则它将从父元素继承。因此，如果父元素可编辑，则该元素也可编辑。如果该属性在没有值的情况下给出，例如 <label contenteditable> content </label>，则其值将被视为空字符串。

语法

<element contenteditable = " true | false " >

此属性接受二进制值，即 true 或 false。

应用于

由于它是一个全局属性，因此所有元素都接受此属性，但也存在一些例外。例如 <p>、<article>、<footer>、<div>、<span> 等。

HTML contenteditable 属性示例

下面的示例将说明 HTML contenteditable 属性，以及我们应该在哪里以及如何使用此属性！

可编辑的段落元素

在下面的示例中，我们创建一个段落元素并在该元素上设置 contenteditable="true"，如果您单击该元素，您会看到文本是可编辑的。

<!DOCTYPE html>
<html>
<head>
   <title>HTML contenteditable Attribute</title>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <h3>HTML contenteditable Attribute</h3>
   <p contenteditable="true">
      Tutorialspoint: 
      A computer science portal for tutorials,
      article and, CS courses!
   </p>
</body>
</html>

Blockquote 和 Cite 内容可编辑

在下面的示例中，让我们看看 content editable 属性在此 HTML 文档中的用法，如下所示。

<!DOCTYPE html>
<html>

<head>
    <style>
        blockquote {
            background: #eee;
            border-radius: 5px;
            margin: 16px 0;
            padding: 10px;
        }

        cite {
            margin: 10px 30px;
            font-weight: bold;
            float: right;
        }
    </style>
</head>

<body>
    <blockquote contenteditable="true">
        <p>Write down todays Quote</p>
    </blockquote>
    <cite contenteditable="true">
      Your Name
   </cite>
</body>

</html>

带有空值的 Contenteditable

在下面的示例中，我们正在创建一个 HTML 文档并使用 contenteditable 属性及其值 false 和空，如下所示

<!DOCTYPE html>
<html>

<head>
    <style>
        blockquote {
            background: #eee;
            border-radius: 5px;
            margin: 16px 0;
            padding: 10px;
        }

        cite {
            margin: 10px 30px;
            font-weight: bold;
            float: right;
        }
    </style>
</head>

<body>
    <blockquote contenteditable>
        <p>Write down todays Quote</p>
    </blockquote>
    <cite contenteditable="false">
      Tutorialspoint
   </cite>
</body>

</html>

支持的浏览器

属性
contenteditable	是 4.0	是 6.0	是 3.5	是 3.1	是 10.1

html_attributes_reference.htm

打印页面