Maneira definitiva de acionar eventos de pressionamento de tecla com jQuery

260

Eu li todas as respostas para essas perguntas e nenhuma das soluções parece funcionar.

Além disso, estou percebendo que o acionamento de teclas pressionadas com caracteres especiais não funciona. Alguém pode verificar quem fez isso?

mkoryak
fonte
14
Não, você sente falta do conceito. Não é assim que deve funcionar. O acionador chamará apenas o manipulador de eventos. Na verdade, não imprimirá a chave. Se você deseja simular o efeito de imprimir a chave, basta adicionar a chave ao valor de entrada e acionar o evento ao mesmo tempo.
Nadia Alramli
Interessante, eu não sabia disso. Nesse caso, você pode me dizer se o acionamento do evento também o acionará para bibliotecas não-jquery. por exemplo, se eu tiver um onKeydown configurado em JS comum, ele capturará meu evento "falso"?
Mkoryak
2
sim, se houvesse um onkeydown = '...' configurado em js simples. Será acionado pelo evento falso. Eu não tinha certeza disso. Mas fiz um teste rápido e funcionou.
Nadia Alramli
2
@ Nadia Obrigado por isso! Eu li todas as respostas, perguntando-me por que as coisas não estavam funcionando antes de perceber que minhas expectativas não estavam corretas. Suspeito que muitas outras pessoas tenham os mesmos conceitos errados.
Mikemaccana
3
Dois anos depois ... lendo a página, parece que o caminho definitivo é: $ ('input # search'). Trigger ($. Event ('keydown', {qual: $. Ui.keyCode.ENTER, keyCode: $ .ui.keyCode.ENTER}));
Molokoloco 16/05

Respostas:

365

Se você deseja acionar o evento de pressionamento ou pressionamento de tecla, tudo o que você precisa fazer é:

var e = jQuery.Event("keydown");
e.which = 50; // # Some key code value
$("input").trigger(e);
Nadia Alramli
fonte
42
a questão é como gatilho, não como capturar
Chad Grant
2
Eu adicionei um exemplo para accionar o evento
Nadia Alramli
4
Resposta muito boa. Vale ressaltar que o jQuery.Event está disponível para o jQuery 1.3 ou superior. Tornou-se relevante nesta pergunta: stackoverflow.com/questions/1823617/… #
artlung
8
Isso não funcionou para mim com um controle deslizante jQuery UI. Eu tive que definir o e.keyCode como a resposta do OreiA abaixo.
CrizCraig
2
fwiw, eu tive mais sucesso com 'keyup' para meu aplicativo
mar
81

Um pouco mais conciso agora com o jQuery 1.6+ :

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

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

(Se você não estiver usando a interface do usuário do jQuery, insira o código-chave apropriado.)

nickb
fonte
4
Lembre-se de substituir 'keyCode' por 'what' também.
Richard Nienaber
Sim, você deve definir quais e keyCode para ser seguro (se as verificações evento ouvinte para e.KeyCode, ele só irá funcionar se você define keyCode ao criar o objeto jQuery.Event)
jackocnr
1
O jQuery normaliza qual / keyCode, portanto, colocar um ou outro deve fazer as duas coisas.
Nigel Angel
+1 no link para api.jquery.com; e as versões atuais do jQuery não normalize que / keyCode, então você deve fornecer tanto para a segurança
Victor
2
@SamuelLindblom Eu deveria ter escrito com mais clareza: o jQuery não normaliza as propriedades de eventos passadas .trigger(jQuery.Event('name', props)). Veja o exemplo jsfiddle.net/9ggmrbpd/1 - as propriedades do evento acionado são passadas como estão. Código fonte: github.com/jquery/jquery/blob/master/src/event.js#L739
Victor
68

A resposta real deve incluir keyCode:

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

Embora o site da jQuery diga que qual e keyCode são normalizados, eles estão muito enganados. É sempre mais seguro fazer as verificações padrão no navegador para e.which e e.keyCode e, nesse caso, apenas definir os dois.

Tomas
fonte
34
+1. A propósito, e.keyCode = e.which = 50;em uma única linha seria melhor. :)
Sk8erPeter
Acabei de descobrir que usar apenas keyCodenão funcionou. Teve para definir tanto para torná-lo trabalho
Tasos K.
@ Sk8erPeter ele não vai a menos que seja um golph competição de codificação
shabunc
18

Se você também estiver usando a interface do usuário do jQuery, poderá fazer o seguinte:

var e = jQuery.Event("keypress");
e.keyCode = $.ui.keyCode.ENTER;
$("input").trigger(e);
Rodrigo Chacon
fonte
1
e.que parece não funcionar com o controle deslizante jQuery UI. Obrigado por esta resposta. Isso funciona.
precisa saber é o seguinte
5

Eu fiz funcionar com keyup.

$("#id input").trigger('keyup');
Abba
fonte
3
na minha pergunta há 6 anos, eu também queria definir o código-chave, mas não sabia como.
Mkoryak
4

Ok, para mim que trabalha com isso ...

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
fonte
2

Caso você precise levar em consideração o cursor atual e a seleção de texto ...

Isso não estava funcionando para mim para um aplicativo AngularJS no Chrome. Como Nadia aponta nos comentários originais, o personagem nunca é visível no campo de entrada (pelo menos, essa foi a minha experiência). Além disso, as soluções anteriores não levam em consideração a seleção de texto atual no campo de entrada. Eu tive que usar uma maravilhosa biblioteca jquery-selection .

Eu tenho um teclado numérico personalizado na tela que preenche vários campos de entrada. Eu precisei...

  1. Em foco, salve o lastFocus.element
  2. No desfoque, salve a seleção de texto atual (iniciar e parar)

    var pos = element.selection('getPos')
    lastFocus.pos = { start: pos.start, end: pos.end}
  3. Quando um botão no meu teclado é pressionado:

    lastFocus.element.selection( 'setPos', lastFocus.pos)
    lastFocus.element.selection( 'replace', {text: myKeyPadChar, caret: 'end'})
Flint O'Brien
fonte
2

Você quer fazer isso em uma única linha, você pode usar

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

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

não há necessidade de mapear o personagem, eu acho.

Weldan Jamili
fonte
1

Isso pode ser realizado como este docs

$('input').trigger("keydown", {which: 50});
Bek
fonte
1
Isso parece não funcionar, pois usa o argumento extraParameters, que não define nada dentro do argumento do evento, mas adiciona argumentos extras ao retorno de chamada do manipulador de eventos.
TimeWaster 6/06/16
1
Não é uma solução válida
Entwickler 03/11