contenteditable=“true”编辑状态时不允许换行效果

最新推荐文章于 2022-03-22 12:10:41 发布

我是小怪兽-

最新推荐文章于 2022-03-22 12:10:41 发布

阅读量4.4k

点赞数 1

分类专栏： CSS+HTML 文章标签： contenteditable 不换行 h5

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

版权

CSS+HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
    <title></title>
</head>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<style>
    .edit_container {
        width: 500px;
        height: 30px;
        background: #599fc2;
        padding: 3px;
        border-radius: 3px;
        line-height: 30px;
    }

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

<body>
   <div class="edit_container" contenteditable="true">我是一段可编辑的文字</div>
</body>

<script>
    $(() => {
        // 聚焦事件
        $('.edit_container').focus(() => {
            $('.edit_container').addClass('enable_edit');
        }).blur(() => {
            $('.edit_container').removeClass('enable_edit');
        });
        //ESC事件
        $('body').keydown(e => {
            if (e.keyCode == 13) {
                $('.edit_container').children('div').remove();
            }
        }).keyup(e => {
            if (e.keyCode == 13) {
                $('.edit_container').children('div').remove();
            }
        });
    });
</script>
</html>

我是小怪兽-

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
contenteditable=“true”编辑状态时不允许换行效果

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><script type="text/javascript" src="jquery-1.11.3.min.js"></scrip...
复制链接

扫一扫

专栏目录