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

打印页面