JavaScript で数字のみを入力する
JavaScript の特定のメソッドまたはプロパティでは、HTML の input フィールドが number タイプの値のみを取得できるようにすることはできません。むしろ、入力ボックスの数値タイプの値のみを受け取る input フィールドの属性 number があります。
数値のみをフィルタリングするタスクを実行する別の方法は、input フィールドタイプを input に設定することです。これは、ほぼすべての種類の可能な入力を有効にすることを意味します。これは、英数字の値を考慮に入れます。
JavaScript コードに含まれる特定の条件は、数値のみを受け入れるようにフィルタリングされます。
次の場合は、keypress イベントを処理し、その keyCode を取得します。その後、私たちの動機に基づいて、数値タイプのデータのみを検証するためのいくつかの条件を設定します。
1つの例には number 属性があり、もう 1つの例には入力フィールドの input 属性があります。
JavaScript でフィールド属性 number を使用し、keyCode の条件を設定する
この例では、JavaScript コードベースに対応する入力フィールドがあります。最初に、event.keyCode または event.which を介して keyCode を取得します。
この keyCode と which はブラウザごとに同じように機能します。したがって、最終的にはコードに基づいて、値をフィルタリングします。
コードフェンスを確認してみましょう。
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input name="someid" type="number" onkeypress="isNumberKey(event)"/>
<div>
</div>
<script>
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
$(document).ready(function(){
$("input").keydown(function(event){
$("div").html("Key: " + event.which);
});
});
</script>
出力：
ご覧のとおり、a=65、b=66、c=67 を押しましたが、これらの値は受け入れられませんでした。その後、値 4 と 2 が入力ボックスに配置されました。
JavaScript でフィールド属性 input を使用し、keyCode の条件を設定する
同様に、このセグメントの入力フィールドに JavaScript コードを設定しますが、この属性は input に設定されます。デフォルトでは、Number タイプ属性は数字を受け取り、他の文字を除外しますが、input タイプの場合、バックスペースや文字などの他の文字を入力する権限があります。
ここで、JavaScript コードは、数値のカウントのみを検証します。
コードスニペット：
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input type="input" id="edit1" size="11" maxlength="10" />
<div>
</div>
<script>
$(document).ready(function(){
$('[id^=edit]').keypress(validateNumber);
});
function validateNumber(event) {
var key = window.event ? event.keyCode : event.which;
if (event.keyCode === 8 || event.keyCode === 46) {
return true;
} else if ( key < 48 || key > 57 ) {
return false;
} else {
return true;
}
};
$(document).ready(function(){
$("input").keydown(function(event){
$("div").html("Key: " + event.which);
});
});
</script>
出力：
