Ostateczny sposób wyzwalania zdarzeń naciśnięcia klawisza za pomocą jQuery

260

Przeczytałem wszystkie odpowiedzi na te pytania i żadne z rozwiązań wydaje się nie działać.

Odczuwam też wrażenie, że naciśnięcie klawisza ze znakami specjalnymi w ogóle nie działa. Czy ktoś może zweryfikować, kto to zrobił?

mkoryak
źródło
14
Nie, tęsknisz za zrozumieniem tej koncepcji. Nie tak to ma działać. wyzwalacz wywołuje tylko moduł obsługi zdarzeń. W rzeczywistości nie wydrukuje klucza. Jeśli chcesz zasymulować efekt drukowania klucza, po prostu dodaj klucz do wartości wejściowej i uruchom zdarzenie w tym samym czasie.
Nadia Alramli
Ciekawe, nie wiedziałem o tym. W takim przypadku możesz mi powiedzieć, czy uruchomienie zdarzenia spowoduje również jego uruchomienie w bibliotekach innych niż jquery. na przykład, jeśli mam onKeydown skonfigurowany w zwykłym JS, czy będzie on przechwytywał moje „fałszywe” wydarzenie?
mkoryak
2
tak, jeśli istniał onkeydown = '...' ustawiony jako zwykły js. Zostanie wywołany przez fałszywe zdarzenie. Nie byłem tego pewien. Ale zrobiłem szybki test i zadziałało.
Nadia Alramli
2
@Nadia Dzięki za to! Przeczytałem wszystkie odpowiedzi, zastanawiając się, dlaczego nic nie działało, zanim zdałem sobie sprawę, że moje oczekiwania były nieprawidłowe. Podejrzewam, że wielu innych ludzi będzie miało takie same nieporozumienia.
mikemaccana
3
Dwa lata później ... czytając stronę, wydaje się, że ostatecznym sposobem jest: $ ('input # search'). Trigger ($. Event ('keydown', {which: $. Ui.keyCode.ENTER, keyCode: $ .ui.keyCode.ENTER}));
molokoloco

Odpowiedzi:

365

Jeśli chcesz wyzwolić naciśnięcie klawisza lub zdarzenie keydown, wszystko, co musisz zrobić, to:

var e = jQuery.Event("keydown");
e.which = 50; // # Some key code value
$("input").trigger(e);
Nadia Alramli
źródło
42
pytanie brzmi: jak uruchomić, a nie jak uchwycić
Chad Grant
2
Dodałem przykład uruchomienia zdarzenia
Nadia Alramli
4
Bardzo miła odpowiedź. Warto zauważyć, że jQuery.Event jest dostępny dla jQuery 1.3 lub nowszej. Stało się istotne w tym pytaniu: stackoverflow.com/questions/1823617/…
artlung
8
Nie działało to dla mnie z suwakiem interfejsu użytkownika jQuery. Musiałem ustawić kod e.keyCode jak odpowiedź OreiA poniżej.
crizCraig
2
fwiw, odniosłem większy sukces dzięki „keyup” dla mojej aplikacji
mark
81

Nieco bardziej zwięzłe teraz dzięki jQuery 1.6+ :

var e = jQuery.Event( 'keydown', { which: $.ui.keyCode.ENTER } );

$('input').trigger(e);

(Jeśli nie używasz interfejsu użytkownika jQuery, wprowadź zamiast tego odpowiedni kod dostępu.)

nickb
źródło
4
Pamiętaj tylko, aby zastąpić „keyCode” słowem „które”.
Richard Nienaber
Tak, musisz zdefiniować, który i keyCode ma być bezpieczny (jeśli detektor zdarzeń sprawdza e.keyCode, zadziała tylko wtedy, gdy zdefiniujesz keyCode podczas tworzenia obiektu jQuery.Event)
jackocnr
1
jQuery normalizuje który / keyCode, więc wstawienie któregoś z nich powinno zrobić jedno i drugie.
Nigel Angel,
+1 za link do api.jquery.com; i obecne wersje jQuery nie normalizują które / keyCode, więc powinieneś podać oba dla bezpieczeństwa
Victor
2
@SamuelLindblom Powinienem był napisać jaśniej: jQuery nie normalizuje przekazywanych właściwości zdarzeń .trigger(jQuery.Event('name', props)). Spójrz na przykład jsfiddle.net/9ggmrbpd/1 - właściwości wyzwalanego zdarzenia są przekazywane bez zmian. Kod źródłowy: github.com/jquery/jquery/blob/master/src/event.js#L739
Victor
68

Prawdziwa odpowiedź musi zawierać kod-klucza:

var e = jQuery.Event("keydown");
e.which = 50; // # Some key code value
e.keyCode = 50
$("input").trigger(e);

Mimo że strona internetowa jQuery mówi, że które i keyCode są znormalizowane, bardzo się mylą. Zawsze najbezpieczniej jest przeprowadzać standardowe kontrole dla różnych przeglądarek dla e.which i e.keyCode, aw tym przypadku po prostu zdefiniuj oba.

Tomas
źródło
34
+1. Nawiasem mówiąc, e.keyCode = e.which = 50;w jednej linii byłoby ładniej. :)
Sk8erPeter
Właśnie się dowiedziałem, że używanie tylko keyCodenie działa. Musiałem ustawić oba, aby zadziałało
Tasos K.
@ Sk8erPeter nie będzie, chyba że będzie to konkurs kodowania
golphów
18

Jeśli używasz również jQuery UI, możesz to zrobić w następujący sposób:

var e = jQuery.Event("keypress");
e.keyCode = $.ui.keyCode.ENTER;
$("input").trigger(e);
Rodrigo Chacon
źródło
1
e. który nie działa z moim suwakiem interfejsu użytkownika jQuery. Dziękuję za tę odpowiedź. To działa.
crizCraig
5

Zrobiłem to z keyup.

$("#id input").trigger('keyup');
Abba
źródło
3
w moim pytaniu 6 lat temu chciałem również ustawić kod, ale nie wiedziałem, jak to zrobić.
mkoryak
4

Ok, dla mnie to działa z tym ...

var e2key = function(e) {
    if (!e) return '';
    var event2key = {
        '96':'0', '97':'1', '98':'2', '99':'3', '100':'4', '101':'5', '102':'6', '103':'7', '104':'8', '105':'9', // Chiffres clavier num
        '48':'m0', '49':'m1', '50':'m2', '51':'m3', '52':'m4', '53':'m5', '54':'m6', '55':'m7', '56':'m8', '57':'m9', // Chiffres caracteres speciaux
        '65':'a', '66':'b', '67':'c', '68':'d', '69':'e', '70':'f', '71':'g', '72':'h', '73':'i', '74':'j', '75':'k', '76':'l', '77':'m', '78':'n', '79':'o', '80':'p', '81':'q', '82':'r', '83':'s', '84':'t', '85':'u', '86':'v', '87':'w', '88':'x', '89':'y', '90':'z', // Alphabet
        '37':'left', '39':'right', '38':'up', '40':'down', '13':'enter', '27':'esc', '32':'space', '107':'+', '109':'-', '33':'pageUp', '34':'pageDown' // KEYCODES
    };
    return event2key[(e.which || e.keyCode)];
};

var page5Key = function(e, customKey) {
    if (e) e.preventDefault();
    switch(e2key(customKey || e)) {
        case 'left': /*...*/ break;
        case 'right': /*...*/ break;
    }
};

$(document).bind('keyup', page5Key);

$(document).trigger('keyup', [{preventDefault:function(){},keyCode:37}]); 
molokoloco
źródło
2

W przypadku, gdy trzeba wziąć pod uwagę bieżący wybór kursora i tekstu ...

To nie działało dla mnie dla aplikacji AngularJS w Chrome. Jak podkreśla Nadia w oryginalnych komentarzach, postać nigdy nie jest widoczna w polu wejściowym (przynajmniej takie było moje doświadczenie). Ponadto poprzednie rozwiązania nie uwzględniają bieżącego wyboru tekstu w polu wprowadzania. Musiałem użyć wspaniałego wyboru biblioteki jquery .

Mam niestandardową klawiaturę numeryczną na ekranie, która wypełnia wiele pól wprowadzania. Musiałem...

  1. Na fokusie zapisz lastFocus.element
  2. Po rozmyciu zapisz bieżący wybór tekstu (start i stop)

    var pos = element.selection('getPos')
    lastFocus.pos = { start: pos.start, end: pos.end}
  3. Po naciśnięciu przycisku na mojej klawiaturze:

    lastFocus.element.selection( 'setPos', lastFocus.pos)
    lastFocus.element.selection( 'replace', {text: myKeyPadChar, caret: 'end'})
Flint O'Brien
źródło
2

Z tego chcesz to zrobić w jednym wierszu, którego możesz użyć

$("input").trigger(jQuery.Event('keydown', { which: '1'.charCodeAt(0) }));
Benjamin Udink ten Cate
źródło
1

console.log( String.fromCharCode(event.charCode) );

chyba nie trzeba mapować postaci.

Weldan Jamili
źródło
1

Można to osiągnąć tak jak w tych dokumentach

$('input').trigger("keydown", {which: 50});
Bek
źródło
1
Wydaje się, że to nie działa, ponieważ używa argumentu extraParameters, który nie ustawia niczego w argumencie zdarzenia, ale dodaje dodatkowe argumenty do wywołania zwrotnego procedury obsługi zdarzeń.
TimeWaster,
1
Niepoprawne rozwiązanie
Entwickler,