jQuery textarea框高度自适应

快乐打工仔 分类:实例代码

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

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

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

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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()一章节。

回复

我来回复
  • 暂无回复内容