Modo definitivo per attivare eventi keypress con jQuery


260

Ho letto tutte le risposte a queste domande e nessuna delle soluzioni sembra funzionare.

Inoltre, ho la sensazione che l'attivazione della pressione dei tasti con caratteri speciali non funzioni affatto. Qualcuno può verificare chi ha fatto questo?


14
No ti manca capito il concetto. Non è così che dovrebbe funzionare. trigger chiamerà solo il gestore eventi. In realtà non stamperà la chiave. Se si desidera simulare l'effetto della stampa della chiave, è sufficiente aggiungere la chiave al valore di input e attivare l'evento contemporaneamente.
Nadia Alramli,

Interessante, non lo sapevo. In tal caso, puoi dirmi se l'attivazione dell'evento lo attiverà anche per librerie non jquery. per esempio, se ho un onKeydown impostato in JS, catturerà il mio evento "falso"?
mkoryak,

2
sì, se ci fosse un onkeydown = '...' impostato in js semplice. Sarà attivato dal falso evento. Non ne ero sicuro. Ma ho fatto un test rapido e ha funzionato.
Nadia Alramli,

2
@Nadia Grazie per quello! Ho letto tutte le risposte chiedendomi perché le cose non funzionassero prima di rendermi conto che le mie aspettative non erano corrette. Sospetto che molte altre persone avranno le stesse idee sbagliate.
mikemaccana,

3
Due anni dopo ... leggendo la pagina sembra che il modo definitivo sia: $ ('input # search'). Trigger ($. Event ('keydown', {che: $. Ui.keyCode.ENTER, keyCode: $ .ui.keyCode.ENTER}));
molokoloco,

Risposte:


365

Se vuoi attivare l'evento keypress o keydown, tutto ciò che devi fare è:

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

42
la domanda è come innescare, non come catturare
Chad Grant,

2
Ho aggiunto un esempio per innescare l'evento
Nadia Alramli,

4
Risposta molto bella. Vale la pena notare che jQuery.Event è disponibile per jQuery 1.3 o versioni successive. E 'diventato rilevante in questa domanda: stackoverflow.com/questions/1823617/...
artlung

8
Questo non ha funzionato per me con un dispositivo di scorrimento dell'interfaccia utente jQuery. Ho dovuto impostare e.keyCode come la risposta di OreiA di seguito.
crizCraig,

2
In seguito, ho avuto più successo con 'keyup' per la mia applicazione
segna il

81

Leggermente più conciso ora con jQuery 1.6+ :

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

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

(Se non stai utilizzando l'interfaccia utente di jQuery, inserisci invece il codice chiave appropriato.)


4
Ricorda solo di sostituire "keyCode" con "quale".
Richard Nienaber,

Sì, è necessario definire quale e keyCode sia sicuro (se il listener di eventi verifica e.keyCode, funzionerà solo se si definisce keyCode durante la creazione dell'oggetto jQuery.Event)
jackocnr

1
jQuery normalizza quale / keyCode inserendo entrambi dovrebbe fare entrambi.
Nigel Angel,

+1 per il collegamento a api.jquery.com; e le attuali versioni di jQuery non normalizzano quale / keyCode, quindi è necessario fornire entrambi per sicurezza
Victor

2
@SamuelLindblom Avrei dovuto scriverlo più chiaramente: jQuery non normalizza le proprietà degli eventi passate .trigger(jQuery.Event('name', props)). Guarda l'esempio jsfiddle.net/9ggmrbpd/1 - le proprietà dell'evento attivato vengono passate così come sono. Codice sorgente: github.com/jquery/jquery/blob/master/src/event.js#L739
Victor

68

La vera risposta deve includere keyCode:

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

Anche se il sito Web di jQuery dice che quale e keyCode sono normalizzati, si sbagliano molto gravemente. È sempre più sicuro eseguire i controlli cross-browser standard per e.which e e.keyCode e in questo caso definirli entrambi.


34
+1. A proposito, e.keyCode = e.which = 50;in una sola riga sarebbe più bello. :)
Sk8erPeter,

Ho appena scoperto che l'utilizzo di solo keyCodenon ha funzionato. Ho dovuto impostare entrambi per farlo funzionare
Tasos K.

@ Sk8erPeter non lo farà a meno che non sia una competizione di codifica
golph

18

Se stai usando anche l'interfaccia utente di jQuery, puoi fare così:

var e = jQuery.Event("keypress");
e.keyCode = $.ui.keyCode.ENTER;
$("input").trigger(e);

1
e. che non sembra funzionare con il mio dispositivo di scorrimento dell'interfaccia utente jQuery. Grazie per questa risposta Funziona
crizCraig,

5

L'ho fatto funzionare con il keyup.

$("#id input").trigger('keyup');

3
nella mia domanda 6 anni fa, volevo anche impostare il codice chiave, ma non sapevo come.
mkoryak,

4

Ok, per me che lavoro con questo ...

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}]); 

2

Nel caso in cui sia necessario prendere in considerazione il cursore corrente e la selezione del testo ...

Questo non funzionava per me per un'app AngularJS su Chrome. Come sottolinea Nadia nei commenti originali, il personaggio non è mai visibile nel campo di immissione (almeno, questa è stata la mia esperienza). Inoltre, le soluzioni precedenti non tengono conto della selezione di testo corrente nel campo di input. Ho dovuto usare una meravigliosa selezione di librerie jquery .

Ho un tastierino numerico su schermo personalizzato che riempie più campi di input. Dovevo...

  1. A fuoco, salva lastFocus.element
  2. Alla sfocatura, salva la selezione di testo corrente (inizio e fine)

    var pos = element.selection('getPos')
    lastFocus.pos = { start: pos.start, end: pos.end}
    
  3. Quando viene premuto un pulsante sulla tastiera:

    lastFocus.element.selection( 'setPos', lastFocus.pos)
    lastFocus.element.selection( 'replace', {text: myKeyPadChar, caret: 'end'})
    

2

Di te vuoi farlo in una sola riga che puoi usare

$("input").trigger(jQuery.Event('keydown', { which: '1'.charCodeAt(0) }));

1

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

non c'è bisogno di mappare il personaggio immagino.


1

Può essere realizzato come questo documento

$('input').trigger("keydown", {which: 50});

1
Questo non sembra funzionare perché utilizza l'argomento extraParameters che non imposta nulla all'interno dell'argomento dell'evento ma aggiunge ulteriori argomenti al callback del gestore eventi.
TimeWaster,

1
Non è una soluzione valida
Entwickler,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.