>  기사  >  php教程  >  jquery 텍스트 채우기의 자동 높이를 구현하는 방법

jquery 텍스트 채우기의 자동 높이를 구현하는 방법

高洛峰
高洛峰원래의
2016-12-07 15:08:121149검색

jquery 플러그인 작성을 시작하겠습니다

(function($){
  $.fn.autoTextarea = function(options) {
    var defaults={
      maxHeight:null,//文本框是否自动撑高,默认:null,不自动撑高;如果自动撑高必须输入数值,该值作为文本框自动撑高的最大高度
      minHeight:$(this).height()
    };
    var opts = $.extend({},defaults,options);
    return $(this).each(function() {
      $(this).bind("paste cut keydown keyup focus blur",function(){
        var height,style=this.style;
        this.style.height = opts.minHeight + 'px';
        if (this.scrollHeight > opts.minHeight) {
          if (opts.maxHeight && this.scrollHeight > opts.maxHeight) {
            height = opts.maxHeight;
            style.overflowY = 'scroll';
          } else {
            height = this.scrollHeight;
            style.overflowY = 'hidden';
          }
          style.height = height + 'px';
        }
      });
    });
  };
})(jQuery);

호출 코드 예:

<textarea name="textarea" id="textarea" cols="60" rows="4" class="chackTextarea-area"></textarea>
<script type="text/javascript">
 
  $(".chackTextarea-area").autoTextarea({
    maxHeight: 220,//文本框是否自动撑高,默认:null,不自动撑高;如果自动撑高必须输入数值,该值作为文本框自动撑高的最大高度
  });



성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.