jquery实现类似微信输入框的输入聊天框

最新推荐文章于 2022-08-24 09:13:13 发布

Start-ZJ

最新推荐文章于 2022-08-24 09:13:13 发布

阅读量1.2k

点赞数

分类专栏：前端 # JaveScript # JS的小案例

本文链接：https://blog.csdn.net/qq_38054172/article/details/102686731

版权

前端同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

JaveScript

20 篇文章 0 订阅

订阅专栏

JS的小案例

6 篇文章 0 订阅

订阅专栏

最近在切一张聊天页面的时候需要实现一个类似于像微信一样的聊天输入框，即输入框的高度会随着内容的增加不断增高。

综合了一下网上的思路目前有依靠keyup来判断的，但是这种方法在遇到一次性输入大量文本的时候好像有点问题，而且在遇到删除文字时好像也有点问题。还有一种是依靠定时器来解决。当用户的焦点在输入框的时候隔一段时间就检查输入框里文本的实际高度，一旦实际高度大于输入框的高度，即把输入框的高度调成与文本的实际高度一致。我的代码就是采用了第二种。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天框</title>
    <script type="text/javascript" src="JS/jquery-3.4.1.min.js"></script>
    <style>
        .div {
            position: fixed;
            width: 200px;
            height: auto;
            min-height: 60px;
            border: solid black 1px;
            background-color: #FFF;
            bottom: 100px;
            left: -40px;
            margin-left: 50%;
        }

        .div-textarea {
            position: absolute;
            width: 80%;
            height: auto;
            top: 10px;
            left: 10px;
            bottom: 10px;
            overflow-x: hidden;
            overflow-y: hidden;
            -webkit-user-select: text;
            word-wrap: break-word;
            word-break: break-all;
        }
    </style>
</head>
<body>
<div class="div"><textarea class="div-textarea"></textarea></div>
<script>
    $(function () {
        /*不断的保持高度相同*/
        function keepHeight() {
            var newHeight = $('.div-textarea')[0].scrollHeight;
            $('.div').height(newHeight);
        }
        /*定时器*/
        var liaotoan = setInterval(keepHeight, 1);
        /*鼠标焦点时开启定时器*/
        $('.div-textarea').on('click', function () {
            liaotoan = setInterval(keepHeight, 1);
        });
        /*关闭定时器*/
        $('.div-textarea').on('blur', function () {
            clearInterval(liaotoan);
        });
    });
</script>
</body>
</html>

Start-ZJ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery实现类似微信输入框的输入聊天框

最近在切一张聊天页面的时候需要实现一个类似于像微信一样的聊天输入框，即输入框的高度会随着内容的增加不断增高。综合了一下网上的思路目前有依靠keyup来判断的，但是这种方法在遇到一次性输入大量文本的时候好像有点问题，而且在遇到删除文字时好像也有点问题。还有一种是依靠定时器来解决。当用户的焦点在输入框的时候隔一段时间就检查输入框里文本的实际高度，一旦实际高度大于输入框的高度，即把输入框的高度调成与...
复制链接

扫一扫

专栏目录