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

列印頁面