Desencadear um evento keypress / keydown / keyup no JS / jQuery?

Qual é a melhor maneira de simular um usuário digitando texto em uma caixa de entrada de texto em JS e / ou jQuery?

Eu não quiser realmente colocar texto na caixa de entrada, eu só quero para acionar todos os eventos manipuladores que normalmente se desencadeada por uma informação do usuário a digitar em uma caixa de entrada. Isso significa foco, pressionamento de tecla, pressionamento de tecla, keyup e desfoque. Eu acho que.

Então, como alguém conseguiria isso?

Você pode acionar qualquer um dos eventos com uma chamada direta para eles, assim:

$(function() {
    $('item').keydown();
    $('item').keypress();
    $('item').keyup();
    $('item').blur();
});

Isso faz o que você está tentando fazer?

Você provavelmente também deve acionar .focus()e potencialmente.change()

Se você deseja acionar os eventos-chave com chaves específicas, pode fazer o seguinte:

$(function() {
    var e = $.Event('keypress');
    e.which = 65; // Character 'A'
    $('item').trigger(e);
});

Há uma discussão interessante sobre os eventos de pressionamento de tecla aqui: jQuery Event Keypress: Qual tecla foi pressionada? , especificamente em relação à compatibilidade entre navegadores com a propriedade .which.

Você pode enviar eventos como

el.dispatchEvent(new Event('focus'));
el.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));

Para acionar uma enterpressão de tecla, tive que modificar a resposta @ebynum, especificamente, usando a propriedade keyCode.

e = $.Event('keyup');
e.keyCode= 13; // enter
$('input').trigger(e);

Aqui está um exemplo de vanilla js para acionar qualquer evento:

function triggerEvent(el, type){
if ('createEvent' in document) {
        // modern browsers, IE9+
        var e = document.createEvent('HTMLEvents');
        e.initEvent(type, false, true);
        el.dispatchEvent(e);
    } else {
        // IE 8
        var e = document.createEventObject();
        e.eventType = type;
        el.fireEvent('on'+e.eventType, e);
    }
}

Você pode conseguir isso com: EventTarget.dispatchEvent(event)e passando um novo KeyboardEvent como o evento.

Por exemplo: element.dispatchEvent(new KeyboardEvent('keypress', {'key': 'a'}))

Exemplo de trabalho:

// get the element in question
const input = document.getElementsByTagName("input")[0];

// focus on the input element
input.focus();

// add event listeners to the input element
input.addEventListener('keypress', (event) => {
  console.log("You have pressed key: ", event.key);
});

input.addEventListener('keydown', (event) => {
  console.log(`key: ${event.key} has been pressed down`);
});

input.addEventListener('keyup', (event) => {
  console.log(`key: ${event.key} has been released`);
});

// dispatch keyboard events
input.dispatchEvent(new KeyboardEvent('keypress',  {'key':'h'}));
input.dispatchEvent(new KeyboardEvent('keydown',  {'key':'e'}));
input.dispatchEvent(new KeyboardEvent('keyup', {'key':'y'}));

<input type="text" placeholder="foo" />

MDN dispatchEvent

MDN KeyboardEvent

Agora você é capaz de fazer:

var e = $.Event("keydown", {keyCode: 64});

Antes de tudo, preciso dizer que a amostra do Sionnach733 funcionou perfeitamente. Alguns usuários reclamam da ausência de exemplos reais. Aqui estão meus dois centavos. Estive trabalhando na simulação de cliques do mouse ao usar este site: https://www.youtube.com/tv . Você pode abrir qualquer vídeo e tentar executar este código. Ele executa a mudança para o próximo vídeo.

function triggerEvent(el, type, keyCode) {
    if ('createEvent' in document) {
            // modern browsers, IE9+
            var e = document.createEvent('HTMLEvents');
            e.keyCode = keyCode;
            e.initEvent(type, false, true);
            el.dispatchEvent(e);
    } else {
        // IE 8
        var e = document.createEventObject();
        e.keyCode = keyCode;
        e.eventType = type;
        el.fireEvent('on'+e.eventType, e);
    }
}

var nextButton = document.getElementsByClassName('icon-player-next')[0];
triggerEvent(nextButton, 'keyup', 13); // simulate mouse/enter key press

Pensei em chamar sua atenção que, no contexto específico em que um ouvinte foi definido dentro de um plugin jQuery, a única coisa que simulou com êxito o evento de pressionamento de tecla para mim, eventualmente capturado por esse ouvinte, foi usar setTimeout (). por exemplo

setTimeout(function() { $("#txtName").keypress() } , 1000);

Qualquer uso de $("#txtName").keypress()foi ignorado , embora colocado no final do .ready() function. De qualquer maneira, nenhum suplemento DOM em particular estava sendo criado de forma assíncrona.

Para conversão de texto datilografado em KeyboardEventInit e forneça o número inteiro keyCode correto

const event = new KeyboardEvent("keydown", {
          keyCode: 38,
        } as KeyboardEventInit);