HTML - DOM 元素 isContentEditable 属性

isContentEditable 属性检查网页元素是否可以直接由用户编辑。如果为 true，则表示用户可以直接编辑网页上特定元素的内容；如果为 false，则编辑功能被禁用。

语法

element.isContentEditable

返回值

此属性返回一个布尔值，如果元素的内容可以由用户编辑，则返回 'true'；否则返回 'false'。

HTML DOM 元素 'isContentEditable' 属性示例

以下是 isContentEditable 属性的一些示例，这些示例检查元素的内容是否可以直接由用户在网页上编辑。

检查内容是否可编辑

在此示例中，我们有一个 ID 为 "editable" 且 contenteditable = "true" 的<div> 元素，允许用户直接在网页上编辑其内容。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Content Editable</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>isContentEditable property</h2>
    <p>Element's content can be edited...</p>
    
    <div id="editableDiv" class="editable" 
                            contenteditable="true">
        <strong>This div is editable. Edit Me!</strong>
    </div>
    
    <script>
        const editableDiv = document.getElementById
        ('editableDiv');        
    </script>
    
</body>

</html>

内容不可编辑

在此示例中，我们有另一个 <div> 元素，其 ID 为 "nonEditableDov" 且 contenteditable = "false"，使其对用户不可编辑。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>non-editable</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>isContentEditable property</h2>
    <p>
        Element's content cannot be edited...
    </p>
    
    <div id="nonEditableDiv"  contenteditable="false">
      <strong>This div is not editable.</strong>
    </div>
    
    <script>
        const nonEditableDiv = document.getElementById
        ('nonEditableDiv');
        if (!nonEditableDiv.isContentEditable) {
            document.write
            ('<p>returns false - cannot be edited.</p>');
        }
    </script>
</body>

</html>

支持的浏览器

属性
isContentEditable	是	是	是	是	是

html_dom_element_reference.htm

打印页面