HTML - DOM 元素 contentEditable 屬性

contentEditable 屬性允許您使 HTML 元素內的文字內容對使用者可編輯。它類似於布林型別：'true' 表示可編輯，'false' 表示不可編輯，'inherit' 表示元素可以從其父元素繼承可編輯性。

語法

設定 contentEditable 屬性

element.contentEditable = value

獲取 contentEditable 屬性

element.contentEditable

返回值

此屬性返回一個字串：'true' 表示可編輯內容，'false' 表示不可編輯內容，'inherit' 表示從其父元素繼承可編輯性，這是預設行為。

HTML DOM 元素“contentEditable”屬性示例

以下是一些示例，說明了在各種場景中 contentEditable 屬性的用法

可編輯段落

此示例允許我們只需點選<p> 元素內部即可直接編輯段落的內容。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .editable {
            border: 1px solid #ccc;
            padding: 10px;
            width: 300px;
        }
    </style>
</head>

<body>
    <h2 align = "center">HTML - DOM Element </h2>
    <h3 align = "center">contentEditable Property
    <br><br>Content Editable Paragraph</h3>
    <p class="editable" contenteditable="true">
        Click here to edit this paragraph. 
        You can modify the text directly.
    </p>
    <p><strong>Note:</strong> 
        Click inside the paragraph above to start editing.
    </p>
</body>

</html>

檢查段落的可編輯性

此示例透過單擊網頁上的按鈕來檢查段落的可編輯性（是否可編輯）。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
        .editable {
            border: 1px solid black;
            padding: 10px; 
        }
    </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>ContentEditable Property</h2>
    <h3>Check editability with a click!</h3>
    
    <div class="editable" contenteditable="true" 
                            id="editablePara">
        Edit me! Am I editable? Can you modify me?
    </div> 
    <br>
    <button onclick="checkEditable()">
        Check Editable
    </button>
    
    <script>
        function checkEditable() {
            const editablePara = 
            document.getElementById('editablePara');
            const isEditable =editablePara.isContentEditable;
            alert(`Is Editable: ${isEditable ? 
            'Yes' : 'No'}`);
        }
    </script>
</body>

</html>

在可編輯和不可編輯內容之間切換

此示例允許我們透過切換開關按鈕來控制內容的可編輯性，該按鈕可在網頁上啟用和停用內容的可編輯性。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
        .editable {
            border: 1px solid black;
            padding: 10px;
            margin-bottom: 20px;
        }
        .edit-mode {
            background-color: #94b0ff;
        }
        .btn {
            cursor: pointer;
        }
        .btn:hover {
            background-color: #45a049;
        }
    </style>
</head>

<body>
    <h1 align = "center">HTML - DOM Element</h1>
    <h2 align = "center">ContentEditable Property</h2>
    <p>
    Control the editability of the below content!!!!!
    </p>    
    <div class="editable" id="editablePara" 
                            contenteditable="true">
        <p>
        This paragraph is editable. 
        Click the button below to toggle edit mode.
        </p>
    </div> 
    <button class="btn" onclick="toggleEditable()">
        Toggle Edit Mode
    </button>
    
    <script>
        function toggleEditable() {
            const editablePara = 
            document.getElementById('editablePara');
            editablePara.contentEditable = 
            editablePara.contentEditable === 'true' ?
                'false' : 'true';
            const btnText = editablePara.contentEditable === 
            'true' ? 'Disable Edit Mode' :'Enable Edit Mode';
            document.querySelector('.btn').textContent = 
            btnText;
            editablePara.classList.toggle('edit-mode');
        }
    </script>
</body>

</html>

可編輯表格單元格內容

此示例使我們能夠透過將 contentEditable 屬性設定為 true 來使表格可編輯。因此，我們可以直接修改每個表格單元格的文字內容。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        table {
            border-collapse: collapse;
            width: 50%;
            margin: 20px auto;
        }
        table, th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        td:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>

<body>
    <h2 align = "center">HTML - DOM Element </h2>
    <h3 align = "center">contentEditable Property
    <br><br>Edit This Table</h3>
    <table contenteditable="true">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>30</td>
                <td>New York</td>
            </tr>
            <tr>
                <td>Jane Smith</td>
                <td>25</td>
                <td>Los Angeles</td>
            </tr>
            <tr>
                <td>Michael Brown</td>
                <td>40</td>
                <td>Chicago</td>
            </tr>
        </tbody>
    </table>

    <p><
        strong>Note:</strong>
        Click inside the table cells above to 
        start editing. Cells will highlight when hovered.
    </p>
</body>

</html>

支援的瀏覽器

屬性
contentEditable	是	是	是	是	是

html_dom_element_reference.htm

列印頁面