ホームページ > ウェブフロントエンド > jsチュートリアル > 入力文字数制限機能(jquery版とネイティブJS版)_jquery

入力文字数制限機能(jquery版とネイティブJS版)_jquery

WBOY
リリース: 2016-05-16 18:20:08
オリジナル
1145 人が閲覧しました

既知のバグ:
Ubuntu システムでは、onkeyup イベントが失敗します。詳細については、次を参照してください。Ubuntu システムでの中国語入力の onkeyup/onkeydown エラーのバグデモを見る: ここをクリックしてください。デモを表示するには
コア コード:

コードをコピー コードは次のとおりです:
//ネイティブ JavaScript バージョン
window.onload=function(){
var js=document.getElementById('js');//テキスト フィールドを取得します
var info=document.getElementsByTagName('p ')[0];//情報要素を挿入するためのプロンプトを取得します
var submit=info.getElementsByTagName('input')[0];//送信ボタンを取得します
var max=js.getAttribute(' maxlength');//制限された入力の最大長を取得します
vartips=document.createElement('span');//新しいチップスパンを作成します
var val,cur,count,warn; >submit.disabled=true;//デフォルトでは送信できません
ヒント .innerHTML='' 最大 ' 文字も入力できます[中国語と英語は区別されません]文字]';
if(max){
js.onkeyup=js.onchange=function(){
submit.disabled=false; nodeName!='SPAN') info.appendChild(tips);//Avoid each プロンプト メッセージがポップアップするたびに挿入されます
count=info.getElementsByTagName('em')[0];//入力番号に応じた領域
warn=info.getElementsByTagName('font')[0];/ /Subtitle
val=this.value;
cur=val.length;
// (var i=0;i// if(val.charCodeAt(i)>255 ) cur =1;
// }
if(cur==0){ // デフォルト値の長さが 0 の場合、入力できる数値はデフォルトの maxlength 値となり、送信できません今回は
count.innerHTML = max;
submit.disabled=true;
warn.innerHTML='文字数は中国語と英語を区別しません'; max) {//デフォルト値が制限値未満の場合、入力できる数値は max-cur
count.innerHTML = max - cur
warn 中国語を区別しません。および英字';
}else{
count.innerHTML = 0;//デフォルト値が制限以上の場合、プロンプトメッセージを挿入し、制限内の値をインターセプトします
warn .innerHTML='No more input!';
this.value=val.substring(0,max);//変数 val は、ここの前の this.value に使用できません。これらは同じ値ではなくなります。
}
}
}
}
//jQuery バージョンに基づく
$(function(){
var _area=$('textarea#jq');
var _info=_area.next();
var _submit=_info.find(':submit');
var _max=_area.attr('maxlength'); _count, _warn;
_submit.attr('disabled',true);
_area.bind('keyup change',function(){ //キーアップと変更イベントをバインドします
_submit.attr('disabled) ' ,false);
if(_info.find('span').size()<1){//ポップアップするたびにプロンプ​​ト メッセージを挿入しないようにします
_info.append('' _max '[中国語と英語の文字を区別しません]
}
_val=$(this).val();
_cur=_val.length;
_warn=_info.find('font'); 🎜 >
if(_cur==0){//デフォルト値の長さが 0 の場合、入力できる数値はデフォルトの maxlength 値となり、現時点では送信できません
_count.text( _max);
_submit.attr ('disabled',true);
}else if(_cur<_max){// デフォルト値が制限数未満の場合、入力できる数は最大です-cur
_count.text(_max-_cur);
_warn.text('中国語と英語の文字を区別しません');
}else{// デフォルト値以上の場合制限までは、プロンプトメッセージを挿入し、制限内の値をインターセプトします
_count.text (0)
_warn.text('これ以上入力しないでください!'); _val.substring(0,_max));
}
});
オンラインテストコード:
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート