jQuery_jquery に基づいてテキスト ボックス内の単語数を計算するコード

1. 機能:
1. ユーザーが入力している間に計算が実行され、残りの入力単語数がユーザーに通知されます。
2. 指定された単語数を超えたら、[OK] をクリックして入力ボックスをオンにします。が点滅します
2. 機能分析
1. キーポイントとなるイベントは何ですか?
標準ブラウザは oninput を使用しますが、IE は onpropertychange を使用します。これら 2 つのイベントの発生条件は、テキスト ボックスの値が変化することです。
2.文字数の計算。
2.1 漢字 1 文字は 2 文字、記号または数字 1 文字、英語文字は 1 文字と数えます。 (140 文字を指定した場合、2 を掛けると 280 になります)
2.2 Math.ceil メソッドを使用する必要があります。これは、表示される単語数を元に戻すには、最終的には 2 で割る必要があるためです。ユーザー;
3. Flash 動的背景色
反復アクションであるため、ここではモジュール操作が使用されます。最初の場合は色があり、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 = 280;
var num = 0;
$tex.val ("" );
//上部のヒント
$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; ;
}
function changeNum(){
//中国語の文字数
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("単語数も入力できます" text "").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("入力した単語数が テキスト "" ).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")
}
}
})
})