web-dev-qa-db-ja.com

jquery keyup関数は、数値かどうかをチェックします

ユーザーが数字のみを入力できる入力フィールドを作成しようとしています。私にとって、この機能はすでにほぼ正常に機能しています。

        $('#p_first').keyup(function(event){
        if(isNaN(String.fromCharCode(event.which))){
            var value = $(this).val();

            $(this).val(value.substr(0,value.length-1));
        }
    });

しかし、問題は、ユーザーが機能キーアップがトリガーされていない文字でキーを保持していることです....これを禁止する方法はありますか？

jqueryfunctioncharacterkeyup
13
Adam Sam

keypressの代わりにkeyupイベントにバインドしてみてください。キーが押されると繰り返し発生します。押されたキーが数字ではない場合、preventDefault()を呼び出して、キーがinputタグに配置されないようにすることができます。

   $('#p_first').keypress(function(event){

       if(event.which != 8 && isNaN(String.fromCharCode(event.which))){
           event.preventDefault(); //stop character from entering input
       }

   });

動作例：http://jsfiddle.net/rTWrb/2/

32
Kevin Bowersox

@Rahul Yadavが提供する回答を使用することにしましたが、異なるコードを持つnumパッドキーを考慮していないため、間違っています。

ここでは、 コードテーブルの抜粋 を確認できます。

ここで私が実装した機能：

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;
}
3
Richard P.

最良の方法は、押されたキーの代わりに、入力の値を確認することです。文字コードを使用するときにチェックする必要があるタブ、矢印、バックスペース、およびその他の文字があるためです。

ユーザーがキーを押した後、そのコードは入力値をチェックします。

_$('#p_first').keyup(function(){
    while(! /^(([0-9]+)((\.|,)([0-9]{0,2}))?)?$/.test($('#p_first').val())){
        $('#p_first').val($('#p_first').val().slice(0, -1));
    }
});
_

Whileループは、入力値が有効になるまで最後の文字を削除します。正規表現/^(([0-9]+)((\.|,)([0-9]{0,2}))?)?$/は、整数と浮動小数点数を検証します。 「12,12」、「12.1」、「12。」。 数字の「12。」（末尾のドット）も有効であることが重要です！それ以外の場合、ユーザーはピリオドを入力できません。

そして、有効な浮動小数点数_([0-9]{1,2})_ではなく_([0-9]{0,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');

2
instead

この解決策を試してください：

jQuery('.numbersOnly').keyup(function () { 
    this.value = this.value.replace(/[^0-9\.]/g,'');
});

デモ： http://jsfiddle.net/DbRTj/

同じ質問：

1
webdeveloper

これを試してください。

<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>
0
Krunal Hingu

キーイベントでは、event.keyを使用して実際の値を取得します。整数かどうかを確認するには：

isFinite(event.key);

より簡単なHTMLソリューションは、numberタイプの入力を使用することです。数字（種類）のみに制限されます。

<input type="number">

いずれにせよ、すべてのユーザー入力を次のものでクリーンアップする必要があります。

string.replace(/[^0-9]/g,'');
0
Gibolt

次の関数を使用して、指定された文字列が数字かどうかを確認しました。この実装はキーアップとキーダウンで機能し、テンキーのキーも処理します

// 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;
    }
0
Sacky San