web-dev-qa-db-ja.com

JavaScriptリスナー、「keypress」はバックスペースを検出しませんか？

keypressリスナーを使用しています。

addEventListener("keypress", function(event){

}

ただし、これはテキストを消去するバックスペースを検出しないようです...

これを検出するために使用できる別のリスナーはありますか？

javascriptkeypressaddeventlistener
120
Skizit

KeyPressイベントは文字（印刷可能）キーに対してのみ呼び出され、KeyDownイベントは次のような印刷不可を含むすべてに対して発生します。 Control、 Shift、 Alt、 BackSpaceなど.

更新：

Keypressイベントは、キーが押されたときに発生し、そのキーは通常文字値を生成します

参照 。

147
Kris Ivanov

keydownの代わりにkeypressを試してください。

キーボードイベントは、keydown、keyup、keypressの順に発生します。

バックスペースの問題は、おそらくブラウザーがkeyupに戻ってナビゲートするため、ページにkeypressイベントが表示されないことです。

60
Tomalak

keypressイベントは、ブラウザーによって異なる場合があります。

ChromeとFirefoxで（JQueryショートカットを使用して）キーボードイベントを比較するために Jsfiddle を作成しました。使用しているブラウザに応じて、keypressイベントがトリガーされるかどうかが決まります。Firefoxではkeydown/keypress/keyupがトリガーされますが、Chromeではkeydown/keyupのみがトリガーされます。

トリガーされた単一のキークリックイベント

Chromeで

  • keydown/keypress/keyupブラウザーがキーボード入力を登録するとき（keypressが起動されます）

  • keydown/keyupキーボード入力がない場合（Alt、Shift、Backspace、矢印キーでテスト）

  • keydownタブのみ？

Firefoxで

  • keydown/keypress/keyupブラウザがキーボード入力を登録するとき、バックスペース、矢印キー、タブも登録するとき（したがって、ここではkeypressは入力なしでも起動されます）

  • keydown/keyup alt、shift

https://api.jquery.com/keypress/ によると、これは驚くべきことではありません。

注：keypressイベントは公式の仕様でカバーされていないため、それを使用するときに発生する実際の動作は、ブラウザー、ブラウザーのバージョン、およびプラットフォームによって異なる場合があります。

Keypressイベントタイプの使用は、W3Cで非推奨になりました（ http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress ）

Keypressイベントタイプは、参照と完全性のためにこの仕様で定義されていますが、この仕様ではこのイベントタイプの使用は非推奨です。編集コンテキストでは、作成者はbeforeinputイベントを代わりにサブスクライブできます。

最後に、質問に答えるには、keyupまたはkeydownを使用して、FirefoxとChromeでバックスペースを検出する必要があります。

ここで試してみてください：

$(".inputTxt").bind("keypress keyup keydown", function (event) {
    var evtType = event.type;
    var eWhich = event.which;
    var echarCode = event.charCode;
    var ekeyCode = event.keyCode;

    switch (evtType) {
        case 'keypress':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<br>");
            break;
        case 'keyup':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<p>");
            break;
        case 'keydown':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<br>");
            break;
        default:
            break;
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="inputTxt" type="text" />
<div id="log"></div>
28
user2314737

誰かがフォームフィールドにいると思っているときにバックスペースを押す問題に遭遇した場合に私が書いたもの

window.addEventListener("keydown", function(e){
    /*
     * keyCode: 8
     * keyIdentifier: "U+0008"
    */
    if(e.keyCode === 8 && document.activeElement !== 'text') {
        e.preventDefault();
        alert('Prevent page from going back');
    }
});
14
Seth McClaine

私の数値制御：

function CheckNumeric(event) {
    var _key = (window.Event) ? event.which : event.keyCode;
    if (_key > 95 && _key < 106) {
        return true;
    }
    else if (_key > 47 && _key < 58) {
        return true;
    }
    else {
        return false;
    }
}

<input type="text" onkeydown="return CheckNumerick(event);" />

それを試してみてください

BackSpaceキーコードは8

8
VolkanCetinkaya

event.key === "バックスペース"

より新しく、よりクリーンに：event.keyを使用します。これ以上の任意の番号コードはありません！

note.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Backspace") {
        // Do something
    }
});

Mozilla Docs

サポートされているブラウザ

3
Gibolt