jQuery textarea框高度自适应

2018-7-20 11:03| 作者: admin| 查看: 728| 评论: 1|来自: 蚂蚁部落

本章节分享一段代码实例,它实现了textarea文本框能够根据内容高度自适应效果。

在默认情况下如果内容超过textarea文本框的高度,那么就会出现滚动条,有时候这有点不够人性化。

如果能够实现高度自适应效果,那就再好不过了。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
jQuery.fn.extend({
  autoHeight: function(){
    return this.each(function(){
      var $this = jQuery(this);
      if( !$this.attr('_initAdjustHeight') ){
        $this.attr('_initAdjustHeight', $this.outerHeight());
      }
      _adjustH(this).on('input', function(){
        _adjustH(this);
      });
    });
    function _adjustH(elem){
      var $obj = jQuery(elem);
      return $obj.css({
        height: $obj.attr('_initAdjustHeight'), 
        'overflow-y': 'hidden'
      }).height( elem.scrollHeight );
    }
  }
});
$(function(){
  $('textarea').autoHeight();
 });
</script>
</head>
<body>
<textarea id="txt"></textarea>
</body>
</html>

上面代码完美实现高度自适应功能,更多内容参阅下面文章。

相关阅读:

(1).jQuery.fn.extend参阅jQuery.fn.extend()一章节。

(2).each方法参阅jQuery each()一章节。

(3).attr方法jQuery attr()一章节。

(4).on方法jQuery on()一章节。

(5).css方法jQuery css()一章节。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

发表评论

最新评论

引用 caicai 2017-7-3 15:08
非常好的代码

查看全部评论(1)

返回顶部