keyCodeの問題 - ％文字の入力を防ぐことはできません

Question

私のHTMLページには、入力テキストフィールドがあります。キーボードの数字キーと左右矢印だけを入力したいと思っています。私は以下のJavaScriptを試しましたが、問題はありました。

<input onkeypress="return allowNumberOnly(event)" /> 

function allowNumberOnly(event) { 
    event = event || window.event; 
    var charCode = (event.which) ? event.which : event.keyCode; 

    //keyCode 48-57 represent the number 0-9 
    //keyCode 37,39 represent the Left and Right arrow 
    //keyCode 46 represent the Delete key 
    //keyCode 8 represent the Backspace key 

    return charCode == 37 || charCode == 39 || charCode == 46 || charCode == 8 
       || (charCode >= 48 && charCode <= 57); 
} 

は、このコードをテストした後、私は、左矢印および％特殊文字のキーコードの両方37.あるので、私はその間に左矢印を許可するユーザー入力％文字を防ぐことができないという問題を発見しました。なぜこれが起こるのか分かりません。私はいつもkeyCodeはキーボードの各キーごとに一意でなければならないと考えました。私はonkeypressの代わりにonkeyupを使うことを考えました。しかし、onkeyupはユーザーが無効な文字を最初に入力してから、入力テキストを削除することができます。この動作は私が望むものではありません。どんな提案もありがとうございます。

FireFoxでコードをデバッグしたところ、次の違いが見つかりました。

1％を入力すると、event.which == 37とevent.keyCode == 0
2.左矢印、event.which == 0とevent.keyCodeの== 37

を入力した場合

この違いを利用することで問題は解決されたようです。 IEとChromeで引き続き試してみます。

Answer 1

この質問へのブライアントウィリアムズの答えをチェック：

how can i track arrow keys in Chrome and IE?

を彼がいる場合charCodeは== 0をチェック、または押されているシフトキーをチェック示唆しています。

Answer 2

私はこのa while ago思い付いた：基本的に私たちがここでやっていること、使用されるキーコードを取得し、その文字コードに相当するものに変換され、

<input type="text" name="phoneNumber" onkeypress="numbersOnly(event);"> 

：

var numbersOnly = function(e){ 
    var charCode = (typeof e.which === "number") ? e.which : e.keyCode, 
     chr = String.fromCharCode(charCode); //convert it to a character 

    if(isNaN(parseInt(chr, 10))) e.preventDefault(); 
} 

使い方キーコードの代わりにcharコードをテストします。私はこの方法が私が出会った他のどのものよりもはるかにうまく動作することを発見し、それはかなりうまく動作します。

JS Bin Example.

Answer 3

onKeydownイベントを使用します。このリンクは

http://unixpapa.com/js/key.html

キーボードイベントについての詳細情報を持っている http://kyokodaniel.com/tech/utils/keycodes.html

http://www.west-wind.com/WestwindWebToolkit/samples/Ajax/html5andCss3/keycodechecker.aspx

Answer 4

また、私はjQueryのバージョン

を作った：％の場合には、キーコードのチェックのために、このリンクは53

チェックです

$('input').keypress(function(e){ 

    var code = e.which || e.keyCode ; 

    if (!(e.shiftKey == false && 
      (
       code == 46 || 
       code == 8 || 
       code == 37 || 
       code == 39 || 
       (code >= 48 && code <= 57) 
      ) 
     ) 
    ){ 

     e.preventDefault();     
    } 

}); 

http://jsfiddle.net/gW6k3/