js根据输入字符长度自动调整textarea高度

最新推荐文章于 2024-01-13 11:05:37 发布

罗汉爷

最新推荐文章于 2024-01-13 11:05:37 发布

阅读量1k

点赞数

分类专栏： Web前端文章标签：自动调整textarea高度

本文链接：https://blog.csdn.net/IndexMan/article/details/79468603

版权

Web前端专栏收录该内容

41 篇文章 3 订阅

订阅专栏

1.编写html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动扩展文本框高度</title>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#words").on("input propertychange",function(e){
                var target = e.target;
                var dh = $(target).attr('defaultHeight') || 0;
                if (!dh) {
                    dh = target.clientHeight;
                    $(target).attr('defaultHeight', dh);
                }

                target.style.height = dh + 'px';
                var clientHeight = target.clientHeight;
                var scrollHeight = target.scrollHeight;
                if (clientHeight !== scrollHeight) {
                    target.style.height = scrollHeight + 10 + "px";
                }
            });
        });

    </script>
</head>
<body style="text-align: center">
    <label><h3>请输入：</h3></label><br>
    <textarea id="words" name="words" style="width: 300px;height: 30px;" default-height="20px"></textarea>
</body>
</html>

2.调试

2.1绑定函数前效果

2.2绑定函数后效果

罗汉爷

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js根据输入字符长度自动调整textarea高度

1.编写html&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;自动扩展文本框高度&lt;/title&gt; &lt;script type="text/javascript&qu
复制链接

扫一扫