首頁 > php教程 > PHP开发 > jquery文字填入自動高度的實作方法

jquery文字填入自動高度的實作方法

高洛峰
發布: 2016-12-07 15:08:12
原創
1155 人瀏覽過

下面開始寫一個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,不自动撑高;如果自动撑高必须输入数值,该值作为文本框自动撑高的最大高度
  });
登入後複製

   


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板