jqueryプラグイン制作 自己増加入力ボックス実装 code_jquery

最初にこれをご覧くださいhtml代:

复制代 代码如下:

<フォームアクション="#"メソッド="投稿">
<フィールドセット>

自動成長テキストエリア

このテキストエリアは無限に拡大します。

次来是js插件代：

复制代 代码如下:

(関数 ($) {
$.fn.autogrow = 関数 (オプション) {
var デフォルト = {
minHeight: 0,
maxHeight: 9999
};
var options = $.extend(defaults, options);
return this.each(function () {
var element = $(this);
//上一次文本框内容长度和宽度
var lastValLength, lastWidth;
//文本の内容の長さ、幅、高さ
//验证页面元素は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 < lastValLength || width != lastWidth) {
$(this).height( 0);
}
//计算适合的文章高さ
height = Math.max(options.minHeight, Math.min($(this).prop('scrollHeight'), options.maxHeight ));
//如果当前文本框の高さが我们允承認の最大高さを超えるとき、隐藏多余文字；否か設定が自動
//$(this).prop('scrollHeight') >高さだけ在在高さ取得的值是options.maxHeight才注意义
$(this).css('overflow', ($(this).prop('scrollHeight') > height ? 'auto' : 'hidden '))
.height(height); //設置文本框高
lastValLength = valLength;
lastWidth = 幅;
});
});
}
})(jQuery);


の例は比較的単純で、テキスト ボックスに情報が入力される時期であり、テキスト ボックスの高さは状況に応じて自動的に増加します。一遍コードを手動で書き込むと、特定の状況に遭遇したり、デモが失敗したりする可能性があります。努力することで、js の能力も向上します。 >デモダウンロード地址：
jQuery.plugin.autogrow