jsの入力桁数を制限するにはどのような方法を使用すればよいですか?-jsチュートリアル-php.cn

jsの入力桁数を制限するにはどのような方法を使用すればよいですか?

零下一度

リリース： 2017-06-29 09:35:40

オリジナル

2516 人が閲覧しました

数値型の入力ボックスを使用する場合、入力桁数を制限する必要がある場合があります。このとき、通常は maxlength を考慮しますが、数値型の場合は maxlength がサポートされません。この問題の手法。

1) 最大値と最小値

最大値と最小値は番号入力ボックスでサポートされているため、11 桁の携帯電話番号の入力を制限したい場合は、次のコードを使用できます

<input type="number" max="99999999999" />

ログイン後にコピー

これは機能しませんユーザー入力を制限しますが、送信時にユーザーにプロンプトが表示されます。

[例]

2) oninputイベント

は余分な数字をスライスして削除します

1 myInput.oninput = function () {2     if (this.value.length > 4) {3         this.value = this.value.slice(0,4); 
4     }5 }

ログイン後にコピー

しかし、これはmaxlengthのロジック、つまり前の入力にカーソルを移動するときのロジックとはまだ少し異なります。数字をもう一度入力すると、最後の数字が削除されることがわかります。

[例]

3) keydown

keydownイベントは、数字を押した後の現在の入力値の桁数を決定するのに役立ちます。桁数を超えた場合は、どこにいても false を返します。カーソルは、新しい数字は入力されません。

<input type="number" onKeyDown="if(this.value.length==2) return false;" />

ログイン後にコピー

しかし、これにより、2 つの数字が満たされた場合、削除キー (またはすべてのキー) が無効になります。 ╮(╯﹏╰)╭本当に恥ずかしいです

[例]

4) キープレス、キーダウン、オン入力で

 1 <input name="myInput_DRS" onkeypress="return isNumeric(event)" 
 onkeydown="return isMoreThan(event)" oninput="maxLengthCheck(this)" 
 type="number" placeholder="Type..." min="1" max="999" /> 2  3 <script> 4   
 function maxLengthCheck(object) { 5     
 if (object.value.length > object.max.length) 6       
 object.value = object.value.slice(0, object.max.length) 7   }   
 function isNumeric(evt) {10     var theEvent = evt || window.event;11     
 var key = theEvent.keyCode || theEvent.which;12     key = String.fromCharCode(key);13    
 var regex = /[0-9]|\./;14     if (!regex.test(key)) {15       theEvent.returnValue = false;16       
 if (theEvent.preventDefault) theEvent.preventDefault();17     }18   }19 20   function isMoreThan(evt) {21     
 var theEvent = evt || window.event;22     var target = theEvent.target;23     var keyID = event.keyCode;24     
 var isDelete = false;25     switch (keyID) {26       case 8:27           isDelete = true;28         
 // alert("backspace");29         break;30       case 46:31           isDelete = true;32         
 // alert("delete");33         break;34       default:35         break;36     }37 38     
 if (!isDelete && target.value.length == target.max.length) {39       return false;40     
 } 
 } 
 </script>

ログイン後にコピー

[例]

5) 入力パートナー

<input type="text" pattern="\d*" maxlength="2">

ログイン後にコピー

ですが、互換性は良くありません, Internet Explorer 10、Firefox、Opera、Chrome は pattern 属性をサポートしています。

注: Safari または Internet Explorer 9 以前のバージョンは、タグのパターン属性をサポートしていません。

6) input[type=tel]

モバイルデバイスでは、input[type=tel] は maxlength をサポートしており、テンキーを使用してのみ入力できます。

以上がjsの入力桁数を制限するにはどのような方法を使用すればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。