web-dev-qa-db-ja.com

jQuery：keypressイベントで非文字キーを除外する方法は？

私は検索を試みましたが、どの用語を探すべきかわかりません。

私はjQueryを使用していて、テキストボックスでkeypressイベントを使用したいのですが、印刷できない文字（つまり Enter、 ESC、 矢印キー、 backspace、 tab、 ctrl、 insert、 F1-F12など）、イベントのトリガーから。

それが印刷可能かどうかを判断する簡単な方法はありますか？

javascriptjquerykeypress
37
twig

この質問に対して選択された回答は完全ではありません。修飾キーと組み合わせて文字キーが押されている場合（例： CTRL-A）。

たとえば、次のように入力してみてください CTRL-A 次のコードでFirefoxを使用しています。現在の答えはそれをキャラクターとみなします：

HTML：

<input placeholder="Try typing CTRL-A in Firefox" style="width: 200px"/>

JavaScript：

$("input").keypress(function (e) {
    if (e.which !== 0) {
        alert(String.fromCharCode(e.which));
    }
});

http://jsfiddle.net/4jx7v/

注：一部のブラウザー（Chromeなど）を使用している場合は、文字以外の入力に対してkeypressイベントを発生させないため、アラートは発生しません。

より良い解決策は次のとおりです。

HTML：

<input placeholder="Try typing CTRL-A in Firefox" style="width: 200px"/>

JavaScript：

$("input").keypress(function (e) {
    if (e.which !== 0 &&
        !e.ctrlKey && !e.metaKey && !e.altKey
    ) {
        alert(String.fromCharCode(e.which));
    }
});

http://jsfiddle.net/hY5f4/

この場合、アラートは以下の場合にのみ発生します A 押された CTRL-A すべてのブラウザ用。

27
Daniel
<script>
    $("input").keypress(function (e) {
        if (e.which !== 0 &&
            !e.ctrlKey && !e.metaKey && !e.altKey) {
            alert(String.fromCharCode(e.which));
        }
    });
</script>

JQuery 1.4.2、FF、IE、Chromeでうまく機能するようです。

JSキーボードイベント処理の混乱について詳しくは、以下を参照してください。 JavaScript Madness：キーボードイベント

Danielのコメント に従って、ctrl、meta、altキーの組み合わせをフィルターするように更新されました。

28
Andras Vass

フィールドの入力が実際に変更されたときに何かを実行したい場合は、inputイベントではなくkeypressイベントを使用する必要があります。 IE <9最近をサポートする場合は、専用のpropertychangeイベントも必要になります。

JQueryでは、次のように使用できます。

$('input').on('propertychange input', function (e) {
    // will fire directly but only when input changes
});
0
de hart

キーの組み合わせを確認することは、すべての場合に最適なソリューションとは限りません。たとえば、キーの組み合わせを使用して文字を入力すると、onkeypressイベントはブロックされますが、ブロックされません。

ここでそれを試してみてください、それが機能しないことがわかります： http://jsfiddle.net/4jx7v/

（Macではalt +文字を、Windowsではalt +一連の数字キーを試してください。）

これに代わる方法は、入力値が前の値から変更されたかどうかを単にチェックすることです。そのようにして、何かが入力されたことを確認します。

JavaScript：

var previousValue;
$("input").keypress(function (e) {
    if (previousValue != $(this).val()) {
        alert('Something has been typed.');
    }
});
0
Marian