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

還是先看html代碼：

複製代碼代碼如下：

標題>



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

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

表格>
身體>

接下來是js 外掛程式碼：

複製程式碼 程式碼如下：

(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);


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

建議大家在看懂程式碼的基礎上，還是自己可以反覆寫程式碼，增強可以加深記憶，二來可能會遇到一些特殊情況，可能自己的示範運作不成功。透過努力，讓自己的演示運行成功，你的js能力提升了。
示範下載位址：
jQuery.plugin.autogrow