jQuery_jquery를 기반으로 텍스트 상자의 단어 수를 계산하는 코드

1. 기능:
1. 사용자가 입력하는 동안 계산이 수행되어 입력할 단어 수를 사용자에게 알려줍니다.
2. 지정된 단어 수를 초과하면 확인을 클릭하고 입력 상자를 클릭합니다. 깜박입니다
2. 기능 분석
1. 어떤 이벤트가 핵심 포인트인가요?
표준 브라우저는 oninput을 사용하는 반면 IE는 onpropertychange를 사용합니다. 이 두 이벤트가 발생하는 조건은 텍스트 상자의 값이 변경된다는 것입니다.
　2. 단어 수 계산.
2.1 한자는 2개로, 기호나 숫자는 1개, 영문은 1개로 계산됩니다. (140자를 지정하면 2를 곱하면 280이 됩니다.)
2.2 Math.ceil 메서드를 사용해야 합니다. 결국 표시되는 단어 수를 복원하려면 2로 나누어야 하기 때문입니다. 사용자;
3. 플래시 동적 배경색
여기서는 모듈식 작업이 사용됩니다. 처음에는 색상이 있고 두 번째에는 색상이 없기 때문입니다. 깜박이는 효과
육안으로 확인해야 하기 때문에 2차 효과는 컬러, 무색이므로 액션을 반복해야 하기 때문에 여기서는 setTimeout, setInterval을 사용합니다.

동영상을 제공해 주신 "Wiaowei Classroom"에게 감사드립니다

온라인 데모: http://demo.jb51.net/js/2012/myinputCount/
패키지 다운로드: http://www.jb51.net/jiaoben/55149.html

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

$(function (){
var $tex = $(".tex");
var $but = $(".but")
var ie = jQuery.support.htmlSerialize; = 0;
var abcnum = 0;
var texts= 0;
var set = null; ("" );
//상단에 팁 텍스트
$tex.focus(function(){
if($tex.val()==""){
$(" p").html("입력할 수 있는 문자 수140");
}
})
$tex.blur(function(){
if($tex.val() == ""){
$("p").html("아래에 텍스트를 입력하세요:")
}
})
// 텍스트 상자의 단어 수 계산 및 변경 사항 표시
if(ie){
$tex[0].oninput =changeNum
}else{
$tex[0].onpropertychange =changeNum; ;
}
functionchangeNum(){
//한자수
str = ($tex.val().replace(/w/g,"")).length;
//비한자 숫자
abcnum = $tex.val().length-str;
total = str*2 abcnum
if(str*2 abcnum$but.removeClass()
$but.addClass("but")
texts =Math.ceil((maxNum - (str*2 abcnum))/ 2);
$( "p").html("단어 수를 입력할 수도 있습니다" texts "").children().css({"color":" blue"});
} else if(str*2 abcnum>maxNum){
$but.removeClass("")
$but.addClass("grey");
texts =Math .ceil(((str*2 abcnum )-maxNum)/2);
$("p").html("입력한 단어 수가 을 초과합니다." texts "" ).children("span").css ({"color":"red"})
}
}
//버튼 클릭
$but.click(function(){
if($(this).is (".grey")){
sets = setInterval(flash,100)
$tex.addClass("textColor")
}
함수 flash(){
num;
if(num == 4){
clearInterval(sets)
}
if(num%2 == 1){
$tex .addClass("textColor")
}else{
$tex.removeClass("textColor")
}
}
})
})