2

キーを押したときにテキスト入力を検証する方法を見つけようとしています。小数を含むテキスト入力内でのみ数字を許可したいと考えています。

jQuery.keydown を使用し、キーが何であるかを確認し、キーが許可リストにない場合は event.preventDefault() を使用するというアプローチをとっていました。しかし、それ以来、ブラウザー全体でキーが一貫していないことを読み、OS が異なることも心配しています。

この質問に出くわしましたが、正規表現に堪能ではなく、これが私のニーズに合っているかどうかわかりません: jquery - keypress で文字を検証しますか?

そのアプローチでは、キーアップ時に正規表現がチェックされるため、00.00 が入力されると、00.00 を期待する正規表現はユーザーを停止します。

ありがとう

4

4 に答える 4

10

(検証ではなく) 入力を制限したい場合は、キー イベントを操作できます。このようなもの：

<input type="text" class="numbersOnly" value="" />

と：

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

または、ユーザーがフィールドを「離れた」後、on change イベントを使用してこれを更新できます。このようにして、ユーザーは矢印キーを使用してテキストをナビゲートできます。

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

これにより、後で検証段階ではなく、アルファベット文字などを入力できないことがすぐにユーザーに通知されます。

入力は、マウスでカット アンド ペーストするか、キー イベントをトリガーしない可能性があるフォーム オートコンプリータによって入力される可能性があるため、引き続き検証する必要があります。

フィドル: http://jsfiddle.net/shannonhochkins/eu7P9/

于 2012-09-30T08:25:05.910 に答える
3

e.which を使用して 10 進数を検証しました

$(document).ready(function () { 
    var isEnable=true;
$(".only-number-period").live('keydown', function (e) {
    //isEnable = (e.which != 110) ? false : true;
        if( ((e.which == 9) || (e.which == 46) || (e.which == 8) || (e.which == 110) || (e.which >= 48 && e.which <= 57) || (e.which >= 96 && e.which <= 105))){
            if(isEnable ==false && e.which ==110){return false;}
        }else{
        return false
        }  
    if (isEnable == true) {            
    isEnable=(e.which ==110)?false:true;
        }
    });
});​

リンク::http://jsfiddle.net/rTr2w/

于 2012-11-11T11:02:29.743 に答える
3

ユーザーが無効な文字を右クリックして貼り付けた場合、検証が失敗することを意味するため、キーイベントに依存しないでください。

代わりにすべきことは、zurb のtextchangedイベントのようなものを使用することです。これは、入力モード (キー、ペースト、ドラッグ アンド ドロップなど) に関係なく正確にトリガーされます。

http://www.zurb.com/playground/jquery-text-change-custom-event

ハンドラー内textchangedで、小数を処理するための適切な正規表現を入れることができます。

于 2012-09-30T08:25:16.290 に答える
2

Shannonの回答を使用して、次の単純な JS コードを提供します。

jQuery('.numbersOnly').keyup(function () {
    if(($(this).val().split(".")[0]).indexOf("00")>-1){
        $(this).val($(this).val().replace("00","0"));
    } else {
        $(this).val($(this).val().replace(/[^0-9\.]/g,''));
    }
});

これを実際に見てください：http://jsfiddle.net/SnakeEyes/eu7P9/2/

update 複数のシンボルを避ける.には、次のコードを使用します。

jQuery('.numbersOnly').keyup(function (e) {
    if(($(this).val().split(".")[0]).indexOf("00")>-1){
        $(this).val($(this).val().replace("00","0"));
    } else {
        $(this).val($(this).val().replace(/[^0-9\.]/g,''));
    }

    if($(this).val().split(".")[2] != null || ($(this).val().split(".")[2]).length ){
        $(this).val($(this).val().substring(0, $(this).val().lastIndexOf(".")));
    }   
});

例: http://jsfiddle.net/SnakeEyes/eu7P9/3/

于 2012-09-30T08:31:42.643 に答える