Odbiornik JavaScript, „naciśnięcie klawisza” nie wykrywa cofnięcia?

141

Używam keypresssłuchacza np.

addEventListener("keypress", function(event){

}

Jednak to nie wydaje się wykrywać cofania, które usuwa tekst ...

Czy istnieje inny odbiornik, którego mogę użyć, aby to wykryć?

Skizit
źródło

Odpowiedzi:

167

Impreza KeyPress jest wywoływana tylko dla znaku (do druku) klucze, KeyDown zdarzenie jest wywoływane dla wszystkich, w tym niedrukowalny takich jak Control, Shift, Alt, BackSpace, itd.

AKTUALIZACJA:

Zdarzenie keypress jest uruchamiane, gdy klawisz jest wciśnięty, a ten klawisz zwykle tworzy wartość znakową

Odniesienie .

Krisa Iwanowa
źródło
3
Nie do końca prawda: wiele niedrukowalnych kluczy wywołuje keypresszdarzenia w wielu przeglądarkach. Zobacz unixpapa.com/js/key.html
Tim Down
W aktualnej wersji Mozilli, backspace i wszystko jest wykrywane w zdarzeniu keypress.
iniravpatel
70

Spróbuj keydownzamiast keypress.

Zdarzenia klawiatury występują w następującej kolejności: keydown, keyup,keypress

Problem z backspace polega prawdopodobnie na tym, że przeglądarka powróci, przez keyupco Twoja strona nie zobaczy keypresszdarzenia.

Tomalak
źródło
Nie zaglądałem do standardów, ale wydaje się, że kolejność zdarzeń (przynajmniej w Firefoksie 37) jest keydown keypress keyup. unixpapa.com/js/testkey.html
jxmallett
Wydaje się również, że dla kluczowych zdarzeń w wejściach znak nie pojawia się w polu, dopóki keyupzdarzenie nie zostanie uruchomione .
jxmallett
Ostatni - w iOS (8.2) klawisz Backspace uruchamia tylko keydownzdarzenie, ale znak nie jest usuwany z wejścia aż do jakiegoś czasu po tym.
jxmallett
to jest odpowiedź. to przechwytuje naciśnięcie klawisza usuwania i naciśnięcie klawisza Ctrl + V
user1709076
30

keypressZdarzenie może być różne w różnych przeglądarkach.

Stworzyłem Jsfiddle, aby porównać zdarzenia klawiatury (używając skrótów JQuery) w Chrome i Firefox. W zależności od przeglądarki, której używasz, keypresszdarzenie zostanie wyzwolone lub nie - Backspace uruchomi się keydown/keypress/keyupw przeglądarce Firefox, ale tylko keydown/keyupw Chrome.

Wywołane zdarzenia pojedynczego kliknięcia klawisza

w przeglądarce Chrome

  • keydown/keypress/keyupkiedy przeglądarka zarejestruje wejście z klawiatury ( keypressjest odpalona)

  • keydown/keyup jeśli nie wprowadzono danych z klawiatury (testowane za pomocą klawiszy alt, shift, backspace, strzałek)

  • keydown tylko na kartę?

w przeglądarce Firefox

  • keydown/keypress/keyupkiedy przeglądarka rejestruje wejście z klawiatury, ale także dla backspace, klawiszy strzałek, tabulatora (więc tutaj keypressjest uruchamiany nawet bez wejścia)

  • keydown/keyup dla alt, shift


Nie powinno to dziwić, ponieważ według https://api.jquery.com/keypress/ :

Uwaga: ponieważ zdarzenie keypress nie jest objęte żadną oficjalną specyfikacją, rzeczywiste zachowanie napotkane podczas korzystania z niego może się różnić w zależności od przeglądarek, wersji przeglądarek i platform.

Używanie typu zdarzenia keypress jest przestarzałe przez W3C ( http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress )

Typ zdarzenia naciśnięcia klawisza jest zdefiniowany w niniejszej specyfikacji w celu odniesienia i kompletności, ale ta specyfikacja nie jest zalecana do używania tego typu zdarzenia. W kontekstach edycji autorzy mogą zamiast tego zasubskrybować zdarzenie beforeinput.


Na koniec, aby odpowiedzieć na swoje pytanie, powinieneś użyć keyuplub keydownwykryć backspace w przeglądarkach Firefox i Chrome.


Wypróbuj tutaj:

$(".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
źródło
1
Świetna odpowiedź - głównie za wyjaśnienie różnych sposobów obsługi cofania się w różnych przeglądarkach
Jivan
2
W3School już to zrobiło: w3schools.com/jsref/ ...
Tân
1
Code Snippet był bardzo pomocny
John Gilmer,
17

Coś, co napisałem na wypadek, gdyby ktoś napotkał problem z naciśnięciem klawisza Backspace, myśląc, że znajduje się w polu formularza

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
źródło
8

Moja kontrola numeryczna:

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

Spróbuj

Kod klucza BackSpace to 8

VolkanCetinkaya
źródło
6

event.key === "Backspace"

Nowsze i znacznie czystsze: użyj event.key. Nigdy więcej dowolnych kodów liczbowych!

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

Dokumenty Mozilli

Obsługiwane przeglądarki

Gibolt
źródło
1
W 2018 roku to najlepszy sposób, aby to osiągnąć!
tfantina
Używałem kodu klucza 8 dla backspace w każdym języku, z którym pracowałem. Naucz się kodów ASCII, nie są one arbitralne.
André Werlang
3
To, że używałeś, nie oznacza, że ​​nie ma lepszej opcji. .keyjest obecnie zalecaną opcją przez dokumentację. Ponadto obsługuje różne klawiatury międzynarodowe z różnymi mapowaniami dla dowolnego klawisza. Nie są arbitralne w tym sensie, że są naprawione, ale są podczas czytania kodu
Gibolt
2

Zamiast tego użyj jednego ze zdarzeń keyup / keydown / beforeinput.

na podstawie tego odniesienia keypress jest przestarzałe i nie jest już zalecane.

Zdarzenie keypress jest wywoływane po naciśnięciu klawisza, który generuje wartość znakową. Przykładami kluczy, które tworzą wartość znakową, są klawisze alfabetyczne, numeryczne i znaki interpunkcyjne. Przykładami klawiszy, które nie tworzą wartości znakowej, są klawisze modyfikujące, takie jak Alt, Shift, Ctrl lub Meta.

jeśli używasz „beforeinput”, uważaj na zgodność z przeglądarką . różnica między „beforeinput” a pozostałymi dwoma polega na tym, że „beforeinput” jest uruchamiane, gdy wartość wejściowa ma się zmienić, więc w przypadku znaków, które nie mogą zmienić wartości wejściowej, nie jest ona uruchamiana (np. shift, ctr, alt).

Miałem ten sam problem i dzięki keyup udało się go rozwiązać.

arash nadali
źródło