user-modify实现div可编辑、只读

最新推荐文章于 2023-08-19 16:04:47 发布

maozuai~zi

最新推荐文章于 2023-08-19 16:04:47 发布

阅读量620

点赞数

CC 4.0 BY-SA版权

分类专栏： html css 文章标签： css3 html

本文链接：https://blog.csdn.net/qq_36557846/article/details/123177696

html 同时被 2 个专栏收录

8 篇文章

订阅专栏

css

2 篇文章

订阅专栏

本文通过示例介绍了如何使用CSS样式 `-webkit-user-modify` 和 `-moz-user-modify` 设置HTML元素的编辑权限，包括只读、可编辑富文本、只写及纯文本输入等不同状态，帮助理解网页内容的可编辑性控制。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div可以编辑</title>
    <style>
        .box {
            border: 1px solid red;
            margin: 10px;
            min-height: 100px;
            width: 300px;
        }

        .box1 {
            -webkit-user-modify: read-only;
            -moz-user-modify: read-only;
        }

        .box2 {
            /*支持富文本*/
            -webkit-user-modify: read-write;
            -moz-user-modify: read-write;
        }

        .box3 {
            /*几乎没有浏览器支持*/
            -webkit-user-modify: write-only;
            -moz-user-modify: write-only;
        }

        .box4 {
            /*只能输入文本*/
            -webkit-user-modify: read-write-plaintext-only;
            -moz-user-modify: read-write-plaintext-only;
        }
    </style>
</head>

<body>
    <div class="box box1">只读</div>
    <div class="box box2">可编辑富文本</div>
    <div class="box box3"></div>
    <div class="box box4">只能输入文本</div>
</body>

</html>

在这里插入图片描述