HTML contenteditable 属性

HTML contenteditable 语法

在 HTML 中，contenteditable 是一个全局属性，它用于定义元素是否允许被编辑。绝大多数元素都支持 contenteditable 属性，常见的有：

语法：

<element contenteditable="true">

说明：

element 是支持 contenteditable 属性的元素。contenteditable 属性的取值是一个枚举属性：

当取值为 "true" 时，表示该元素的内容是可编辑的。
当取值为 "false" 时，表示该元素的内容不可编辑。
当取值为 "plaintext-only" 时，会自动清除格式，而只粘贴纯文本。这对开发富文本编辑器非常重要。

在使用 contenteditable 属性时，要特别注意安全性和无障碍性问题。可编辑的元素可能被用户输入恶意代码，或者破坏页面的结构。因此，在启用编辑功能时，应采取措施防止不必要的安全风险。

布尔属性 vs 枚举属性

在 HTML 规范中，contenteditable 属于 “枚举属性 (Enumerated Attribute)”，而不是 “布尔属性 (Boolean Attribute)”。

布尔属性：只要该属性出现就生效，比如：<input autofocus>。
枚举属性：必须赋值才会生效。比如：<div contenteditable="true">。

HTML contenteditable 摘要

属于	HTML 属性
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML contenteditable 示例

接下来，我们通过一个简单的例子来讲解一下 HTML contenteditable 属性是如何使用的。

示例：contenteditable 属性的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p contenteditable="true">这是一段可以被编辑的文字</p>
</body>
</html>

页面效果如下图所示。

HTML contenteditable属性示例效果1

分析：

在上面例子中，我们给 p 元素加上了 contenteditable 属性。当单击 p 元素时，会发现它的内容是可以被编辑的，如下图所示。

HTML contenteditable属性示例效果2