> 웹 프론트엔드 > JS 튜토리얼 > ASP.NET jQuery 예제 13 원본 jQuery 텍스트 상자 문자 제한 플러그인-TextArea Counter_jquery

ASP.NET jQuery 예제 13 원본 jQuery 텍스트 상자 문자 제한 플러그인-TextArea Counter_jquery

WBOY
풀어 주다: 2016-05-16 17:56:32
원래의
937명이 탐색했습니다.

•최대 입력 문자 길이를 제한할 수 있습니다
•문자 가로채기 속도를 설정할 수 있습니다
•사용자 정의 가능한 프롬프트 정보 텍스트 스타일(사용자 정의된 텍스트 내용은 개선될 수 있습니다)
이 플러그인은 영어 문자의 길이를 계산하고 한자도 똑같습니다.
더 이상 고민하지 말고 구체적인 구현 세부 사항이 이미 코드에 설명되어 있습니다.

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

; (function ($) {
$.fn.extend({
textAreaCount: function (options) {
var $ textArea = this;
options = $.extend({
maxlength: 140, // 최대 입력 길이 변수를 정의하고 500으로 초기화
speed: 15, // 문자 삭제를 위한 속도 변수를 정의
msgstyle: "font -family:Arial;font-size:small;color:Gray;small;text-align:right;margin-top:3px;", // 프롬프트 정보 표시 스타일
msgNumStyle: "font -weight:bold;color :Gray;font-style:italic;font-size:larger;" // 프롬프트 메시지의 남은 길이 스타일
}, 옵션);
var $msg = $("
");
// 텍스트 상자 뒤에 프롬프트 정보 컨테이너를 동적으로 로드
$textArea.after($msg);
// 키 누르기 이벤트 추가 현재 내용을 계속 입력할 수 있는지 확인하는 데 사용됩니다.
$textArea.keypress(function (e) {
// 8은 백스페이스 버튼, 46은 삭제 버튼
// 현재 입력 문자 길이가 0 이고 키 값이 8 및 46이 아닌 경우
if ($textArea.val().length >= options.maxlength && e.which ! = '8' && e.which != '46 ') {
e.preventDefault();
return;
}
}).keyup(function () { // 키업 이벤트 추가 나머지 입력 단어를 계산하고
var curlength = this.value.length
$msg.html("").html("" (options.maxlength - curlength) "< ;/span>Word");
var init = setInterval(function () {
// 입력 내용이 설정된 최대 길이보다 큰 경우, 콘텐츠는 설정된 속도로 자동으로 차단됩니다.
if ($textArea.val().length > options.maxlength) {
$textArea.val($textArea.val().substring(0, options .maxlength)));
$msg.html("").html ("" options.maxlength "words"를 입력할 수도 있습니다. ;
}
else {
clearInterval(init);
}
}, options.speed)
}).bind("contextmenu", function (e) / 마우스를 통한 텍스트 조작을 방지하기 위해 마우스 오른쪽 버튼을 비활성화합니다
return false
})// 처음 로드할 때 이제 문자 길이 프롬프트 정보를 입력할 수 있습니다
$ msg.html("").html(" " options.maxlength "Word"를 입력할 수도 있습니다
이것을 반환하세요; 🎜>}
});
})(jQuery);


직접 위 코드를 jquery.textareacounter.js에 복사하여 저장하세요.
데모:
플러그인 사용법을 먼저 살펴보겠습니다. 먼저 플러그인을 참조해야 합니다.





페이지 구조 코드:


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