web-dev-qa-db-ja.com

テキストフィールドを数字のみに制限するJavaScript正規表現（印刷できないキーを許可する必要があります）

以前の開発者からPHP/JSコードを受け取りました。モバイル番号フィールドに番号検証を追加する必要があります。私はすでにHTML検証を行っていますが、誰かが無効なキーを押した場合、無効な入力が含まれているため、フィールドを後で赤く強調表示するためだけに表示されないことを追加する必要があります。

私は多くの正規表現が使用されているのを見てそれらを試しましたが、それらは私が必要とするもののいずれかまたは両方の影響を及ぼしました：文字または特殊文字が入力された場合、受け入れないで表示せず、他のすべての入力（数字、キー）受け入れます（無効な文字をまったく表示せず、表示せずに消去する必要があります）。現在最も機能している正規表現は次のとおりです。

function filterNonDigits(evt)
{
  var event = evt || window.event;
  var keyentered = event.keyCode || event.which;
  keyentered = String.fromCharCode(keyentered);

  //var regex1 = /[0-9]|\./;
  var regex2 = /^[a-zA-Z.,;:|\\\/~!@#$%^&*_-{}\[\]()`"'<>?\s]+$/;

  if( regex2.test(keyentered) ) {
    event.returnValue = false;
    if(event.preventDefault) event.preventDefault();
  }

コメント付きのregex1（IF条件を逆にして）を使用すると、当然、入力が数字のみに制限され、Delete、BackSpaceなどのすべてのキーが使用できなくなりました。regex2を使用しても、Deleteキーまたはテンキーの数字を押すことができません。 。

だから私の質問は、上記のコードを変更して数字だけを受け入れるだけでなくキーも許可することはできますか？もう1つの重要な点は、すべての種類のキーボードを使用できるようにするために、キーにキーコード（8、24など）を使用しないメソッドが必要なことです。

新しいアップデート：

したがって、私のソリューションは次のとおりです。「oninput」プロパティが存在する場合、Ehteshamによって提供されるソリューションを使用し、存在しない場合、バックアップはRohan Kumarによって提供されるソリューションを使用します。だからそれはこのようなものです：

if (obj.hasOwnProperty('oninput') || ('oninput' in obj)) 
{
    $('#mobileno').on('input', function (event) { 
        this.value = this.value.replace(/[^0-9]/g, '');
    });
} 
else 
{
    $('#mobileno').on('keypress',function(e){
        var deleteCode = 8;  var backspaceCode = 46;
        var key = e.which;
        if ((key>=48 && key<=57) || key === deleteCode || key === backspaceCode || (key>=37 &&  key<=40) || key===0)    
        {    
            character = String.fromCharCode(key);
            if( character != '.' && character != '%' && character != '&' && character != '(' && character != '\'' ) 
            { 
                return true; 
            }
            else { return false; }
         }
         else   { return false; }
    });
}

ありがとう。

javascriptjqueryregexvalidationvalidationrules
6
RMK

ここでの最良の方法は、すべての懸念を処理するinputイベントを使用することです。最新のすべてのブラウザでサポートされています。 jQueryを使用すると、次のように実行できます。マウス/キーボードのバックスペースなどで値を貼り付けるすべてのケースを処理します。

$('.numeric').on('input', function (event) { 
    this.value = this.value.replace(/[^0-9]/g, '');
});

見てください ここ

古いブラウザーでinputを使用できない場合は、入力にこのプロパティがあるかどうかを確認することで、onkeyupイベントがサポートされているかどうかを確認できます。

if (inputElement.hasOwnProperty('oninput')) {
    // bind input
} else {
    // bind onkeyup
}
30
Ehtesham

素敵な解決策は 前の投稿 で説明されています：

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

次のように試してください。

[〜＃〜] css [〜＃〜]

.error{border:1px solid #F00;}

[〜＃〜]スクリプト[〜＃〜]

$('#key').on('keydown',function(e){
    var deleteKeyCode = 8;
    var backspaceKeyCode = 46;
    if ((e.which>=48 && e.which<=57) ||
         (e.which>=96 && e.which<=105)  || // for num pad numeric keys
         e.which === deleteKeyCode || // for delete key,
             e.which === backspaceKeyCode) // for backspace
         // you can add code for left,right arrow keys
    {
        $(this).removeClass('error');
        return true;
    }
    else
    {
        $(this).addClass('error');
        return false;
    }
});

フィドル：http://jsfiddle.net/PueS2/

2
Rohan Kumar

イベントのkeyCodeをチェックする代わりに、実際の入力内の変更をチェックしてから、非数値をフィルターに掛けてみませんか？

この例では、キーアップを使用して、実際に入力された内容を読み取ることができます。つまり、文字が一時的に表示されてから削除されますが、うまくいけば、私の要点が得られます。キャラクターが許可されていないことをユーザーにフィードバックすることもできます。どちらの方法でもこれが最も簡単なセットアップだと思いますが、これを具体化するためにさらに支援が必要な場合はお知らせください。

function filterNonDigits(evt)
{
  var event = evt || window.event;
  var val = event.target.value;
  var filtered = val.replace(/[^0-9]/g, '');

    if(filtered !== val) {
      event.target.value = filtered;
      event.target.className += " error";
    }
}

http://jsfiddle.net/mEvSV/1/

（キーアップ関数を簡単にバインドするためだけに使用されるjquery、実際のスクリプトでは必要ありません）

1
Stephan Muller

/\d/は、上記の/[0-9]/と同等です。 src： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-digit

0
electricwizard