jQuery textarea框高度自適應

admin發表於2018-07-20
jQuery

本章節分享一段程式碼例項，它實現了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()一章節。

相關文章