通过按钮控制div文本的编辑

最新推荐文章于 2022-10-12 09:30:01 发布

我是小怪兽-

最新推荐文章于 2022-10-12 09:30:01 发布

阅读量298

点赞数 1

分类专栏： CSS+HTML 文章标签： contenteditable 文本编辑按钮控制 html5

本文链接：https://blog.csdn.net/hry1243916844/article/details/105396953

版权

CSS+HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <title>demo</title>
    <style type="text/css">

        .edit_container {
            width: 500px;
            height: 30px;
            background: #599fc2;
            padding: 3px;
            border-radius: 3px;
            line-height: 30px;
        }

        .btn {
            margin-top: 20px;
            width: 80px;
            height: 20px;
            background: #599fc2;
            padding: 3px;
            border-radius: 3px;
            line-height: 20px;
            text-align: center;
            cursor: pointer;
        }

        .enable_edit {
            border: 1px dashed #1248dd;
        }
    </style>
</head>

<body>
    <p>点击按钮开启编辑，失去焦点后关闭编辑功能</p>
    <div class="edit_container"></div>
    <div class="btn">
        开启编辑
    </div>

    <script src="jquery.min.js"></script>
    <script>
        $(() => {
            $('.btn').click(() => {
                //增加可编辑的属性
                $('.edit_container').attr('contenteditable', true)
                $('.edit_container').focus()
                //增加编辑时效果
                $('.edit_container').addClass('enable_edit')
            });
			//失去焦点时移除掉
            $('.edit_container').blur(() => {
                $('.edit_container').removeAttr('contenteditable')
                $('.edit_container').removeClass('enable_edit')
            });
        });
    </script>
</body>
</html>

我是小怪兽-

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过按钮控制div文本的编辑

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <title...
复制链接

扫一扫