> 웹 프론트엔드 > JS 튜토리얼 > jquery 플러그인 제작 자체 증가 입력 상자 구현 code_jquery

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

WBOY
풀어 주다: 2016-05-16 17:50:51
원래의
1110명이 탐색했습니다.

首先还是看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
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿