jquery 플러그인 제작 자체 증가 입력 상자 구현 code_jquery

首先还是看html代码:

复代码 代码如下:

<머리>
<제목>




<본문>

<필드세트>

자동으로 커지는 텍스트 영역

이 텍스트 영역은 무한정 커집니다.

接下来是js插件代码：

复代码 代码如下:

(함수($) {
$.fn.autogrow = 함수(옵션) {
var defaults = {
minHeight: 0,
maxHeight: 9999
};
var options = $.extend(defaults, options);
return this.each(function () {
var element = $(this);
//上一次文框内容长島和宽degree
var lastValLength, lastWidth; ('textarea')) {
return;
}
element.css('overflow', 'hidden')//设置超流范围的文字隐藏
.keyup(function () {/ /设置键盘弹起事件
//获取文本框内容长島
valLength = $(this).val().length
//获取输入框的宽titude
//我这里使用적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 )));
//如果当前文本框의 높은 속도는 우리가 원하는 최고의 높은 속도를 제공합니다. height 只有재height取得的值是options.maxHeight才有意义
$(this).css('overflow', ($(this).prop('scrollHeight') > height ? 'auto': 'hidden '))
.height(높이); //设置文本框고도
lastValLength = valLength;
lastWidth = 너비;
});
});
}
})(jQuery);


例子比较简单,就是当你往文本框里输入信息的时候,文本框的高島会根据情况自动增长。
　　建议大家는 看懂代码的基础上, 还是自己에 있습니다.动手写一遍代码，一来可以加深记忆，two 来或许会遇到一些特殊情况，或许自己的demo运行不成功。功，你的js能power也就提升了。
demo下载地址：
jQuery.plugin.autogrow