txtaAutoHeight方法在pc端或者移动端运行不正常的情况

最新推荐文章于 2022-04-08 13:43:13 发布

郝强强1994

最新推荐文章于 2022-04-08 13:43:13 发布

阅读量244

点赞数 1

分类专栏：前端文章标签：前端自适应高度 txtaAutoHeight jquery css

本文链接：https://blog.csdn.net/qq_28586119/article/details/96314564

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

txtaAutoHeight方法是一个很好用的jquery的一个可以使textarea自适应高度的方法。
用法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自适应高度</title>
    <link rel="stylesheet" href="css/layui.css">
    <style>
        body{
            display: flex;
            justify-content: center;
        }
        .div1{
            width: 300px;
            height: 50px;
            margin: 10px auto;
            border: 1px solid #000;
            padding: 10px;
        }
    </style>
</head>
<body>
    <textarea class="div1">
    </textarea>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $.fn.extend({
        txtaAutoHeight: function () {
            return this.each(function () {
                var $this = $(this);
                if (!$this.attr('initAttrH')) {
                    $this.attr('initAttrH', $this.outerHeight());
                }
                setAutoHeight(this).on('input', function () {
                    setAutoHeight(this);
                });
            });
            function setAutoHeight(elem) {
                var $obj = $(elem);
                return $obj.css({ height: $obj.attr('initAttrH'), 'overflow-y': 'hidden' }).height(elem.scrollHeight);
            }
        }
    });
    $(function () {
        $(".div1").txtaAutoHeight();
    });
</script>
</body>
</html>

引入该方法之后，然后初始化，就能够使textarea可以自适应高度。
——————————————————————————————————————
但是在某些时候，这个方法有时候会无法正常使用，例如删减数字的时候会接着增加textarea的高度，经检查发现textarea的元素中用到了layuiUI框架中的layui-textarea的元素类，例如：

<textarea class="div1 layui-textarea"></textarea>

当使用了ui插件时候txtaAutoHeight方法运行不正常，在去引入的css文件中搜索textarea这个名称，发现了在.layui-textarea:{outline: none; -webkit-appearance: none; transition: all .3s; -webkit-transition: all .3s; box-sizing: border-box;}中的transition: all .3s; -webkit-transition: all .3s;是问题所在，去除掉这两个属性之后txtaAutoHeight方法可以在textarea中正常使用，所以在使用txtaAutoHeight这个方法时textarea中不可以设置transtion这个属性，否则方法就不能正常运行。

郝强强1994

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
txtaAutoHeight方法在pc端或者移动端运行不正常的情况

txtaAutoHeight方法是一个很好用的jquery的一个可以使textarea自适应高度的方法。用法如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自适应高度</title> <link ...
复制链接

扫一扫