jquery_jquery를 기반으로 한 텍스트 상자 카운터

코드 복사 코드는 다음과 같습니다.

/*
*길이 트래커
* v2.1.0
*bind2Id: 길이 변경을 표시하는 데 사용되는 요소의 ID
*max: 최대 길이
*msgWrap: 프롬프트 메시지("-" 자리 표시자가 있어야 함)
*eg: $ ('#input').lenTracer({bind2Id:'myTracer',max:150,msgWrap:' - 문자도 입력할 수 있습니다.'})
*author:liujg1015@gmail.com
* /
(함수($) {
var zw_validate = 함수(el, 옵션) {
this.el = $(el);
this.bindEl = false;
this.setting = {
bind2Id: false,
max: 100,
msgWrap: '- 문자도 입력할 수 있습니다'
}
if (옵션) {
$.extend( this.setting , 옵션);
}
};
zw_validate.prototype = {
init: function () {
var _this = this; this.bindEl = $('#' this.setting.bind2Id);
this.el.focus(function () { _this.start(); }).blur(function () { _this.dispose (); });
this.el.css({ paddingBottom: 20 });
this.initMsg()
},
initMsg: function () {
var Wrap = this. settings.msgWrap.split('-');
this.bindEl.text(this.setting.max - this.count().total).before(wrap[0]).after(wrap[ 1]) ;
},
count: 함수() {
var _val = this.el.val()
var _len = _val.length; var _rowCount
var _enterLen = 0;
var _partten = /n /g;
if (_len > 0 && _partten.test(_val)) {
_enterLen = 3
while (( 결과 = _partten) .exec(_val)) != null) {
if ((result.index 1 _enterLen) > this.setting.max) {
break
}
_enterLen = 3 ; >}
_rowCount = _val.match(_partten).length;
}
return { total: (_len _rowCount * 3), enterLen: _enterLen },
start: 함수 () {
var _this = this;
_this.timer = setInterval(function () {
var _val = _this.el.val();
var _rlt = _this.count ();
if (_rlt.total > _this.setting.max) {
if (_rlt.enterLen > 0) {
_this.el.val(_val.substr(0, _this.setting.max) - _rlt.enterLen));
}
else {
_this.el.val(_val.substr(0, _this.setting.max))
}
_this .bindEl. text(_this.setting.max - _this.count().total);
return;
}
_this.bindEl.text(_this.setting.max - _rlt.total); , 300);
},
dispose: function () {
clearInterval(this.timer);
},
restore: function () {
this.text (this.setting.max - this.el.val().length);
}
};
$.fn.extend({
lenTracer: 함수(옵션) {
return new zw_validate(this, option);
}
});
})(jQuery)


1. 스크립트를 js 파일에 붙여넣고 html에 참조를 추가하세요.

코드 복사

코드는 다음과 같습니다. 머리> 데모제목>

제목


;

>

;




html>


2. 위의 코드는 사용 방법을 보여줍니다.
이 카운터는 jQuery를 사용하여 직접 작성했기 때문에 jQuery 라이브러리 기능에 따라 다릅니다. 캐리지 리턴 문자는 배경에 제출된 후 텍스트 영역의 캐리지 리턴 문자가 'rn'이므로 계산할 수 있습니다. 비판과 수정을 환영합니다.