js实现文本框textarea高度自适应

最新推荐文章于 2023-02-09 14:41:04 发布

BCance

最新推荐文章于 2023-02-09 14:41:04 发布

阅读量1.2k

点赞数

分类专栏： javascript 文章标签： textarea高度自适应文本框高度自适应

本文链接：https://blog.csdn.net/bcance/article/details/25246409

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

今天有个文本框自适应高度的需求，写了一下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>文本框textarea高度自适应</title>
    <script type="text/javascript">
        function txtAutoHeight(id)
        {            
            var control = document.getElementById(id);
            control.style.height = control.scrollHeight + "px";
        }
    </script>
</head>
<body>
    <textarea id="txtContent" οnkeyup="txtAutoHeight('txtContent')" style="overflow-y: hidden;" rows="8" cols="20"></textarea>
</body>
</html>

随之而来的问题是录入文字后一直在跳，而且如果是使用粘贴方式录入数据就捕获不到了，查了下可以使用即时监听输入框值的onpropertychange事件。

<textarea id="txtContent" onpropertychange="txtAutoHeight('txtContent')" style="overflow-y: hidden;" rows="8" cols="20"></textarea>

这次上边的问题解决了，但是这事件是IE专属的东西，其他浏览器不认，又去查了查可以用input，注意的是需要使用addEventListener注册。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>文本框textarea高度自适应</title>
    <style type="text/css">
        #txtContent {
            font-size:14px;
            height:18px;
            overflow-y:hidden;
            padding:0;
        }
    </style>
</head>
<body>
    <textarea id="txtContent"></textarea>
    <script type="text/javascript" language="javascript">
        var textarea = document.getElementById("txtContent");
        if ("\v" == "v") {
            textarea.onpropertychange = txtAutoHeight;
        } else {
            textarea.addEventListener("input", txtAutoHeight, false);
        }
        function txtAutoHeight() {
            textarea.style.height = textarea.scrollHeight + 'px';
        }
    </script>
</body>
</html>

完工，呵呵。