¿Desencadenar un evento keypress / keydown / keyup en JS / jQuery?

¿Cuál es la mejor manera de simular que un usuario ingrese texto en un cuadro de entrada de texto en JS y / o jQuery?

En realidad, no quiero poner texto en el cuadro de entrada, solo quiero activar todos los controladores de eventos que normalmente serían activados por un usuario que escribe información en un cuadro de entrada. Esto significa foco, keydown, keypress, keyup y blur. Yo creo que.

Entonces, ¿cómo se lograría esto?

Puede activar cualquiera de los eventos con una llamada directa a ellos, así:

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

¿Eso hace lo que estás tratando de hacer?

Probablemente también deberías disparar .focus()y potencialmente.change()

Si desea activar los eventos clave con teclas específicas, puede hacerlo así:

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

Aquí hay una discusión interesante sobre los eventos de pulsación de teclas: jQuery Event Keypress: ¿Qué tecla se presionó? , específicamente con respecto a la compatibilidad entre navegadores con la propiedad .which.

Podrías enviar eventos como

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

Para activar una enterpulsación de tecla, tuve que modificar la respuesta @ebynum, específicamente, usando la propiedad keyCode.

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

Aquí hay un ejemplo de vanilla js para desencadenar cualquier 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);
    }
}

Puede lograr esto con: EventTarget.dispatchEvent(event)y pasando un nuevo KeyboardEvent como evento.

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

Ejemplo de trabajo:

// 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

Ahora puedes hacer:

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

En primer lugar, debo decir que la muestra de Sionnach733 funcionó a la perfección. Algunos usuarios se quejan de la ausencia de ejemplos reales. Aquí están mis dos centavos. He estado trabajando en la simulación del clic del mouse cuando uso este sitio: https://www.youtube.com/tv . Puede abrir cualquier video e intentar ejecutar este código. Realiza el cambio al siguiente video.

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

Pensé en llamar su atención sobre que en el contexto específico donde se definió un oyente dentro de un complemento jQuery, entonces lo único que simuló con éxito el evento de pulsación de tecla para mí, finalmente captado por ese oyente, fue usar setTimeout (). p.ej

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

Cualquier uso de $("#txtName").keypress()fue ignorado , aunque colocado al final de la .ready() function. Ningún suplemento DOM particular se estaba creando de forma asíncrona de todos modos.

Para la conversión de mecanografiado a KeyboardEventInit y proporcionar el entero keyCode correcto

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