数字のみのJavaScript Firefoxソリューション

Question

Firefoxで問題の原因となるバニラJavaScriptコードの一般的な部分を整理するための助けが必要です。

次の/ keyCodeチェックは、数字だけをinputまたはtextareaに許可する最も一般的なバニラJSソリューションに関するようです。

var charCode = (e.which) ? e.which : e.keyCode; 
if (charCode > 31 && (charCode < 48 || charCode > 57)) { 
return false; 
} 
return true; 

タグでonkeypress="return function(event);"と呼びます。

しかし、Firefoxは他のブラウザと同様に、onkeyupとonkeydownのように、矢印キーをonkeypressコールにバインドするように見えます。これは例えば左矢印キーのcharCodeは37ですが、％（シフト+ 5）にはcharCodeもあります。さらに重要なことは、矢印キーをナビゲーション（キャレット/テキストカーソルを左右に移動）に使用できないことを意味します。

しかし、差が（http://www.asquare.net/javascript/tests/KeyCode.htmlに示されるように）％が37のcharCodeとwhichを有しながら、左矢印キーは、keyCode 37を有することです。しかし、私はこのように感じるそれを行うための最善のか、クリーンな方法ではなく、異なる処理を複数のキーがあるかもしれないと

if (charcode > 31 && (charcode < 48 || charcode > 57)) { 
if (e.keycode && e.keyCode > 36 && e.keyCode < 41) { 
    return true; 
} 
    return false; 
} 
return true; 

：だから私は、矢印キーで次の操作を実行して、うまく動作させることができましたFirefoxでは、矢印キーだけではありません。より洗練されたバニラJSソリューションや、この機能の中で少なくとも矢印キーをチェックする方法は何でしょうか？

多くの感謝！

---

編集：私はちょうどそれで、これらは今37-40（すなわち％）charCodesを入力できるように、コードはFirefoxのためにそれを解決していても、それは他のすべてのブラウザのための新たな問題を紹介することを考え出しました。例えば、keyCodeをチェックする代わりに、charCodeまたはwhichをチェックする必要があります。

Answer 1

ユーザーエクスペリエンスが低下すると感じるため、特定のキーをブロックすることをお勧めします。しかし、これがあなたが必要としていることを考えれば、私はkeyCodeプロパティに頼らないことを提案します。だけでなく、それに関連する互換性の問題は、それはまた、そこに入力はマウスやコンテキストメニューと同じように、行うことができるすべての方法をカバーし、かつdeprecatedではありませんされています

この機能は、Web標準から削除されました。

KeyboardEvent.keyCode読み取り専用プロパティは、システムおよび実装に依存数値コードを表す

代わりIは、入力値に対してすべての変更でトリガinputイベントを使用すること、及びその後の値を清掃することを提案最初の問題の文字が見つかった場所にカーソルを置きます。これは、同じユーザー体験について与え、矢印キー、バックスペース、削除、選択、...などの作業方法には悪い影響がありません：あなたは `があることが

document.querySelector('#num').addEventListener('input', function() { 
 
    var badCharPos = this.value.search(/\D/); 
 
    if (badCharPos == -1) return; // all OK 
 
    // remove offending characters: 
 
    this.value = this.value.replace(/\D/g, ''); 
 
    this.setSelectionRange(badCharPos, badCharPos); 
 
});

<input id="num">