4

私は、数値以外の入力を許可しない種類の検証を使用するテキストフィールドに取り組んでいます。そのため、私の最初のコードは非常に単純で、次のようになりました。

$(textField).onKeyPress(function(e) {
    if (e.which < 48 && e.which > 57)
        e.preventDefault();
});

これはかなり簡単ですが、（すべてのブラウザの最新バージョンでは）Firefoxはこれを矢印キーと削除/バックスペースキーによる移動も防止しますが、他のブラウザはそうではありません。

周りを見回すと、これらのキーもチェックし、eイベント参照で公開されているさまざまなプロパティをチェックする必要があることがわかりました。

私の最終的なコードは次のようになります。

$(textField).onKeyPress(function(e) {
    var code = e.which || e.keyCode;
    if (code > 31  // is not a control key
        && (code < 37 || code > 40) // is not an arrow key
        && (code < 48 || code > 57) // is not numeric
        && (code != 46) // is not the delete key
    )
        e.preventDefault();
});

ただし、これは、非数値を防ぐだけの非常に単純な問題を解決するには多すぎると感じます。

私は何が間違っているのですか？この種の検証に関するベストプラクティスはどれですか？

4

3 に答える 3

4

キー押下とブラーイベントの両方に応答します。誰かがキーを押すと、入力されたキーが数字かどうかを確認します。もしそうなら、私たちはそれを許可します。そうでなければ、私たちはそれを防ぎます。

フィールドがぼやけている場合は、数値以外の値とそれに続くすべての値を削除します。これにより、ユーザーが数値以外の文字列を貼り付けることができなくなります。

$("#textfield").on("keypress blur", function(e){
    if ( e.type === "keypress" )
        return !!String.fromCharCode(e.which).match(/^\d$/);
    this.value = this.value.replace(/[^\d].+/, "");
});

デモ： http： //jsfiddle.net/jonathansampson/S7VhV/5/

于 2012-06-02T22:38:20.730 に答える
2

作業デモ http://jsfiddle.net/Pb2eR/23/ 更新されたコピー/貼り付けデモ： http： //jsfiddle.net/Pb2eR/47/（このデモでは、文字列を文字で貼り付けてコピーすると、他の方法では許可されません。番号をコピーして貼り付けることができます：safariでテスト済み）

矢印キーが機能するためのデモ http://jsfiddle.net/gpAUf/

これはあなたを助けます。

注：このバージョンでは、コピーして貼り付けても、safari lionosxでテストされた空の入力ボックスに設定されます:)

良いリンク：[1] jQueryを使用してHTML入力ボックスで数値（0〜9）のみを許可するにはどうすればよいですか？

コード

$(".hulk").keyup(function(){    
    this.value = this.value.replace(/[^0-9\.]/g,'');    
});
​

html

<input type="text" class="hulk" value="" />
​

コピーペーストのものの更新

$(".hulk").keyup(function(){

    this.value = this.value.replace(/[^0-9\.]/g,'');

});

$(".hulk").bind('input propertychange', function() {

     this.value = this.value.replace(/[^0-9\.]/g,'');
});​

別のデモのコード

$(".hulk").bind('input propertychange', function(event) {
         if( !(event.keyCode == 8    // backspace
        || event.keyCode == 46      // delete
        || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
        || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
        || (event.keyCode >= 96 && event.keyCode <= 105))   // number on keypad
        ) {
            event.preventDefault();     // Prevent character input
    }
     this.value = this.value.replace(/[^0-9\.]/g,'');
});

​
于 2012-06-02T22:52:39.660 に答える
-1

これにより、両方のintが可能になります。また、ユーザーがマウスでコピーして貼り付けると、テキストが削除されます。

$(document).ready(function () {
    $('#textfield').bind('keyup blur', function (e) {
        if (e.type == 'keyup') {
            if (parseInt($(this).val()) != $(this).val()) {
                $(this).val($(this).val().slice(0, $(this).val().length - 1));
            }
        } else if (e.type == 'blur') {
            $(this).val('');
        }
    });
});
于 2012-06-02T23:00:33.633 に答える