JavaScript-Listener, "Tastendruck" erkennt keine Rücktaste?

141

Ich benutze einen keypressHörer zB ..

addEventListener("keypress", function(event){

}

Dies scheint jedoch keine Rücktaste zu erkennen, die Text löscht ...

Gibt es einen anderen Listener, mit dem ich dies erkennen kann?

Skizit
quelle

Antworten:

166

KeyPress - Ereignis aufgerufen wird , nur für die Zeichen (druckbare) Tasten wird KeyDown Ereignis ausgelöst hat für alle einschließlich druckbaren wie Control, Shift, Alt, BackSpace, usw.

AKTUALISIEREN:

Das Tastendruckereignis wird ausgelöst, wenn eine Taste gedrückt wird und diese Taste normalerweise einen Zeichenwert erzeugt

Referenz .

Kris Ivanov
quelle
3
Nicht unbedingt wahr: Viele nicht druckbare Schlüssel lösen keypressEreignisse in vielen Browsern aus. Siehe unixpapa.com/js/key.html
Tim Down
In der aktuellen Version von Mozilla werden Rücktaste und alles im Tastendruckereignis erkannt.
Iniravpatel
70

Versuchen Sie keydownstatt keypress.

Die Tastatur - Ereignisse treten in dieser Reihenfolge: keydown, keyup,keypress

Das Problem mit der Rücktaste ist wahrscheinlich, dass der Browser zurück navigiert keyupund Ihre Seite das keypressEreignis daher nicht sieht .

Tomalak
quelle
Ich habe mich nicht mit den Standards befasst, aber die Reihenfolge der Ereignisse (zumindest in Firefox 37) scheint zu sein keydown keypress keyup. unixpapa.com/js/testkey.html
jxmallett
Es scheint auch, dass bei Schlüsselereignissen in Eingaben das Zeichen erst im Feld keyupangezeigt wird, wenn das Ereignis ausgelöst wird.
jxmallett
Letzte - Unter iOS (8.2) löst die Rücktaste nur ein keydownEreignis aus, aber das Zeichen wird erst einige Zeit später aus der Eingabe entfernt.
jxmallett
das ist die Antwort. Dies erfasst Löschen Tastendruck und Strg + V Tastendruck
Benutzer1709076
30

Das keypressEreignis kann in den verschiedenen Browsern unterschiedlich sein.

Ich habe eine Jsfiddle erstellt , um Tastaturereignisse (mithilfe der JQuery-Verknüpfungen) in Chrome und Firefox zu vergleichen. Je nachdem, welchen Browser Sie verwenden, wird ein keypressEreignis ausgelöst oder nicht - die Rücktaste wird keydown/keypress/keyupin Firefox ausgelöst, jedoch nur keydown/keyupin Chrome.

Einzelne Tastendruckereignisse ausgelöst

auf Chrome

  • keydown/keypress/keyupwenn der Browser eine Tastatureingabe registriert ( keypresswird ausgelöst)

  • keydown/keyup wenn keine Tastatureingabe (getestet mit Alt, Shift, Backspace, Pfeiltasten)

  • keydown nur für tab?

auf Firefox

  • keydown/keypress/keyupWenn der Browser eine Tastatureingabe registriert, aber auch für Rücktaste, Pfeiltasten, Tabulator (hier keypresswird also auch ohne Eingabe ausgelöst)

  • keydown/keyup für alt, verschieben


Dies sollte nicht überraschen, denn laut https://api.jquery.com/keypress/ :

Hinweis: Da das Tastendruckereignis nicht durch eine offizielle Spezifikation abgedeckt ist, kann sich das tatsächliche Verhalten bei seiner Verwendung je nach Browser, Browserversion und Plattform unterscheiden.

Die Verwendung des Tastendruck-Ereignistyps wird von W3C nicht mehr empfohlen ( http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress ).

Der Tastendruck-Ereignistyp ist in dieser Spezifikation zur Bezugnahme und Vollständigkeit definiert, diese Spezifikation veraltet jedoch die Verwendung dieses Ereignistyps. In Bearbeitungskontexten können Autoren stattdessen das Ereignis vor der Eingabe abonnieren.


Um Ihre Frage zu beantworten, sollten Sie einen Rückraum in Firefox und Chrome verwenden keyupoder keydownerkennen.


Probieren Sie es hier aus:

$(".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>

user2314737
quelle
1
Fantastische Antwort - hauptsächlich für die Erklärung der verschiedenen Möglichkeiten, mit der Rücktaste zwischen Browsern
umzugehen
2
W3School ist schon fertig: w3schools.com/jsref/…
Tân
1
Code Snippet war sehr hilfreich
John Gilmer
17

Etwas, das ich geschrieben habe, falls jemand auf ein Problem stößt, bei dem Leute die Rücktaste drücken, während sie denken, dass sie sich in einem Formularfeld befinden

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');
    }
});
Seth McClaine
quelle
8

Meine numerische Kontrolle:

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);" />

Versuch es

Der BackSpace-Schlüsselcode lautet 8

VolkanCetinkaya
quelle
6

event.key === "Rücktaste"

Neuere und viel sauberere: verwenden event.key. Keine willkürlichen Nummerncodes mehr!

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

Mozilla Docs

Unterstützte Browser

Gibolt
quelle
1
Im Jahr 2018 ist dies der beste Weg, dies zu tun!
Tfantina
Ich habe den Schlüsselcode 8 für die Rücktaste in jeder einzelnen Sprache verwendet, mit der ich gearbeitet habe. Lernen Sie die ASCII-Codes, sie sind nicht willkürlich.
André Werlang
3
Nur weil Sie verwendet haben , heißt das nicht, dass es keine bessere Option gibt. .keyist derzeit die von den Dokumenten empfohlene Option. Darüber hinaus werden verschiedene internationale Tastaturen mit unterschiedlichen Zuordnungen für eine bestimmte Taste unterstützt. Sie sind nicht willkürlich in dem Sinne, dass sie festgelegt sind, aber sie sind beim Lesen von Code
Gibolt
2

Verwenden Sie stattdessen eines der Ereignisse keyup / keydown / beforeinput.

basierend auf dieser Referenz ist, keypress veraltet und wird nicht mehr empfohlen.

Das Tastendruckereignis wird ausgelöst, wenn eine Taste gedrückt wird, die einen Zeichenwert erzeugt. Beispiele für Tasten, die einen Zeichenwert erzeugen, sind alphabetische, numerische und Interpunktionsschlüssel. Beispiele für Tasten, die keinen Zeichenwert erzeugen, sind Modifizierertasten wie Alt, Umschalt, Strg oder Meta.

wenn Sie „beforeinput“ vorsichtig sein , es der Browser - Kompatibilität . Der Unterschied zwischen "vor Eingabe" und den beiden anderen besteht darin, dass "vor Eingabe" ausgelöst wird, wenn sich der Eingabewert ändert. Bei Zeichen, die den Eingabewert nicht ändern können, wird er also nicht ausgelöst (z. B. Shift, Strg, Alt).

Ich hatte das gleiche Problem und mit Keyup wurde es gelöst.

Arash Nadali
quelle