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?


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

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.)


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.


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

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');

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

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'})

2

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

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

1

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

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


1

Isso pode ser realizado como este docs

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

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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.