私は、ユーザーが数字だけを入力できる入力フィールドを作ろうとしています。この関数は、すでにほぼ正常に動作しています。
$('#p_first').keyup(function(event){
if(isNaN(String.fromCharCode(event.which))){
var value = $(this).val();
$(this).val(value.substr(0,value.length-1));
}
});
しかし、問題なのは、ユーザーが文字入りのキーを押したままだと、ファンクションキーupが発動しないことです...これを禁止する方法があれば教えてください。
keyupの代わりに、
keypressイベントにバインドしてみてください。 このイベントは、キーが押されたときに繰り返し発生します。 押されたキーが数字でない場合は、
preventDefault()`を呼び出すことで、キーが入力タグに配置されないようにすることができます。
$('#p_first').keypress(function(event){
if(event.which != 8 && isNaN(String.fromCharCode(event.which))){
event.preventDefault(); //stop character from entering input
}
});
就業例:
@Rahul Yadavの回答を使用することにしましたが、コードが異なるnum padキーを考慮していないため、誤りです。
ここでは、コードテーブルの抜粋:を表示できます。
ここで私が実装した関数:
function isNumberKey(e) {
var result = false;
try {
var charCode = (e.which) ? e.which : e.keyCode;
if ((charCode >= 48 && charCode <= 57) || (charCode >= 96 && charCode <= 105)) {
result = true;
}
}
catch(err) {
//console.log(err);
}
return result;
}
最良の方法は、押されたキーではなく、入力の値を確認することです。 タブ、矢印、バックスペース、および文字コードを使用するときにチェックする必要があるその他の文字があるためです。
ユーザーがキーを押した後、そのコードは入力値をチェックします。
$('#p_first').keyup(function(){
while(! /^(([0-9]+)((\.|,)([0-9]{0,2}))?)?$/.test($('#p_first').val())){
$('#p_first').val($('#p_first').val().slice(0, -1));
}
});
ループ中に、入力値が有効になるまで最後の文字を削除します。 Regex / ^(([0-9] +)((\。|、)([0-9] {0,2}))?)?$ /
は整数と浮動小数点を検証します。 「12,12」、「12.1」、「12。"。 その数は重要です "12。"(最後のドット)も有効です。!それ以外の場合、ユーザーは期間を入力できません。
次に、 ([0-9] {0,2})
の代わりに有効なフロート番号 ([0-9] {1,2})
の正規表現チェックを送信します。
$('form').submit(function(e){
if(! /^([0-9]+)((\.|,)([0-9]{1,2}))?$/.test($('#p_first').val())){
$('#p_first').addClass('error');
e.preventDefault();
}
});
通知: $( '#p_first')
を変数に割り当てる方が良いです。 var input = $( '#p_first');
。
この解決策を試してみてください。
jQuery('.numbersOnly').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g,'');
});
デモ:
同じ質問です。
これを試してみてください。。それは役立つかもしれません。
<HTML>
<input type="text" name="qty" id="price" value="" style="width:100px;" field="Quantity" class="required">
</HTML>
<script>
$(document).ready(function() {
$('#price').live('keyup',function(){
this.value = this.value.replace(/[^0-9\.]/g,'');
});
});
</script>
次の関数を使用して、特定の文字列が数値であるかどうかを確認しました。 この実装は、キーアップとキーダウンで機能し、numpadキーも処理します。
// Validate Numeric inputs
function isNumber(o) {
return o == '' || !isNaN(o - 0);
}
keyupまたはkeydownイベントのキーコードがkeyCode変数にあると仮定します。
var keyCode = e.keyCode || e.which;
if (keyCode >= 96 && keyCode <= 105) {
// Numpad keys
keyCode -= 48;
}
console.log(isNumber(String.fromCharCode(keyCode)));
console.log(isNumber($(this).val() + String.fromCharCode(keyCode)));
isNumberからの戻り値がfalseの場合、falseを返します。
var txtVal = $(this).val() + String.fromCharCode(keyCode);
if (!isNumber(txtVal)) {
e.returnValue = false;
}
JavaScript:
function isNumberKey(a){
var x=a.val();
a.val(x.replace(/[^0-9\.]/g,''));
}
HTML:
<td><input type="text" name="qty" onkeypress="onkeyup="return isNumberKey($(this));"" value="" style="width:100px;" field="Quantity" class="required"></td>