web-dev-qa-db-ja.com

キーダウン時の数字入力を防ぐには？

テキストフィールドのkeydownイベントでの数値入力を防止し、カスタムハンドラー関数を実行したい。ここに問題があります

  • キー値はまだターゲット値に投影されていないため、_e.target.value_は役に立たない
  • 数値の_e.keyCode_は、キーボードタイプ、言語レイアウト、FnまたはShiftキーに依存します
  • String.fromCharCode(e.keyCode)は、少なくとも私のキーボードでは信頼できません（チェコ語qwerty）
  • w3仕様 は、_e.keyCode_はレガシー属性であり、代わりに_e.char_を提案することを示していますが、ブラウザにはまだ実装されていません

それでは、テキストフィールドに表示される前に数値入力をキャッチする方法は？

javascriptcross-browserkeyboard-events
15
Jan Turoň

代わりにkeypressイベントを使用してください。これは、ほとんどのブラウザのwhichプロパティとIEのkeyCodeプロパティを介して入力された文字に関する情報を提供する唯一の重要なイベントです。これを使用すると、入力した文字に基づいてkeypressイベントを条件付きで抑制することができます。ただし、これはユーザーが数字を含むテキストを貼り付けたりドラッグしたりするのを防ぐのに役立ちません。そのため、何らかの追加の検証が必要になります。

JavaScriptキーイベントに関する私のお気に入りのリファレンス： http://unixpapa.com/js/key.html

textBox.onkeypress = function(e) {
    e = e || window.event;
    var charCode = (typeof e.which == "undefined") ? e.keyCode : e.which;
    var charStr = String.fromCharCode(charCode);
    if (/\d/.test(charStr)) {
        return false;
    }
};
24
Tim Down

整数値を置き換えるためにこれを試してください：

<input onkeydown="Check(this);" onkeyup="Check(this);"/>

<script>
function Check(me) {
    me.value = me.value.replace(/[0-9]/g, "");
}
</script>

整数入力を防ぐには：

<input onkeydown="Check(event);" onkeyup="Check(event);"/>

<script>
function Check(e) {
    var keyCode = (e.keyCode ? e.keyCode : e.which);
    if (keyCode > 47 && keyCode < 58) {
        e.preventDefault();
    }
}
</script>
12
palaѕн

こちらに回答を掲載しました。キーダウン時に入力された文字に対してisNumberチェックを利用できます。以下の回答に示すように、キーダウン時にテンキーのキーを処理するようにしてください。 https://stackoverflow.com/a/42917293/5076414

0
Sacky San

浮動コード文字を防ぐための私の解決策

    // 'left arrow', 'up arrow', 'right arrow', 'down arrow',
    const = arrowsKeyCodes: [37, 38, 39, 40],
    // 'numpad 0', 'numpad 1',  'numpad 2', 'numpad 3', 'numpad 4', 'numpad 5', 'numpad 6', 'numpad 7', 'numpad 8', 'numpad 9'
    const = numPadNumberKeyCodes: [96, 97, 98, 99, 100, 101, 102, 103, 104, 105],

    export const preventFloatingPointNumber = e => {
    // allow only [0-9] number, numpad number, arrow,  BackSpace, Tab
    if ((e.keyCode < 48 && !arrowsKeyCodes.includes(e.keyCode) || e.keyCode > 57 &&
        !numPadNumberKeyCodes.includes(e.keyCode)) &&
        !(e.keyCode === 8 || e.keyCode === 9))
        e.preventDefault()
    }
0
Palaniichuk Dmytro