jQuery让textarea自适应高度

时间：2022-01-17 14:25:01
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>

<body>
<textarea name="" id="textarea" class="mytest"></textarea>
</body>
<script src="js/jquery-2.1.1.min.js"></script>
<script>
        //jQuery实现textarea高度根据内容自适应
        $.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 () {
            $(".mytest").txtaAutoHeight();
         });
</script>
</html>

 

标签：

相关文章