HTML5的contenteditable属性

最新推荐文章于 2025-06-04 07:04:17 发布

原创最新推荐文章于 2025-06-04 07:04:17 发布 · 568 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#contenteditable #html #html5

前端专栏收录该内容

59 篇文章

订阅专栏

本文详细介绍了HTML5中的contenteditable属性，该属性允许用户直接在网页上编辑内容。文章通过实例展示了如何使用该属性控制元素的可编辑状态，包括设置属性值为true、false以及未设置时的行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

该属性是 HTML5 新增全局属性，其用途是让用户能够修改页面上的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>contenteditable</title>
</head>
<body>
    <!--不可编辑-->
    <p>1、You can try to edit this paragraph</p>

    <!--不可编辑-->
    <p>
        <span>2、You can try to edit this paragraph</span>
    </p>

    <!--可编辑（这里不探讨这种写法符不符合规范，从面试的角度来看这种题是可能出现的）-->
    <p contenteditable>3、You can try to edit this paragraph</p>

    <!--随便设置一个属性值，不可编辑（这里不探讨这种写法符不符合规范，从面试的角度来看这种题是可能出现的）-->
    <p contenteditable="randomstring">4、You can try to edit this paragraph</p>

    <!--不可编辑-->
    <p contenteditable="false">5、You can try to edit this paragraph</p>

    <p contenteditable="false">
        <span>6、You can try to edit this paragraph</span> <!--不可编辑-->
    </p>

    <!--可编辑-->
    <p contenteditable="true">7、You can try to edit this paragraph</p>

    <p contenteditable="true">
        <span>8、You can try to edit this paragraph</span> <!--可编辑-->
    </p>
</body>
</html>