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

列印頁面