jquery外掛程式製作 自增長輸入框實現代碼_jquery

標題>



$(document).ready(function () {
$('#autogrow').autogrow();
});
腳本>
頭>

;
自動生長文字區域圖例>
此文字區域將無限期成長。

表格>
身體>

(function ($) {
$fn. = function (options) {
var defaults = {
minHeight: 0,
maxHeight: 9999
};
var options = $.extend(defaults, options); this.each(function () {
var element = $(this);
//上一次文字框內容長度和寬度
var lastValLength, lastWidth;//文字內容框長度、寬度和高度
var valLength, width, height;
//驗證頁元素是textarea
if (!element.is ('textarea')) {
return;
}
element. css('overflow', 'hidden')//設定超出範圍的文字隱藏
.keyup(function () {/ /設定鍵盤彈起事件
//取得文字方塊內容長度
valLength = $(this).val().length;
//取得輸入框的寬度
//我這裡使用的jquery版本是1.8，取得css屬性的方法已經變成了prop
//若使用1.6以下版本的jquery，以下程式碼要變成width = $(this).attr('offsetWidth')
//$(this).prop('scrollHeight')另外：$(this).attr ('scrollHeight')
width = $(this).prop('offsetWidth')
//有文字刪除操作，或文字方塊寬度變化的時候，先將文字方塊高度設定為0
if (valLength $(this).height( 0);
}
//計算適合的文字方塊高度
height = Math.max( options.minHeight, Math.min($(this).prop('scrollHeight'), options.maxHeight ）);
//如果當前文字框的高度超過我們允許的最大高度的時候，多餘隱藏文字；否則設定為auto
//$(this).prop('scrollHeight') > height 只有在height取得的值是options.maxHeight才有意義
$(this).css('overflow', ( $(this).prop('scrollHeight') > height ? 'auto' : 'hidden '))
.height(高度); //設定文字框高度
lastValLength = valLength;
最後寬度=寬度；
});
});
}
})(jQuery);


範例比較簡單，就是當你往文字框裡輸入資訊的時候，文字方塊的高度會根據情況自動增長。