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


173

¿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?

Respuestas:


240

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.


3
o$('item').trigger('keypress', {which: 'A'.charCodeAt(0)});
Bob Stein

@ebynum ¿Puedes escribir algún código con Javascript (sin jquery).
Chris P

1
Si necesita Ctrl: ctrlKey: true, también: shiftKey,altKey
Илья Зеленько

52

Podrías enviar eventos como

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

55
oel.dispatchEvent(new Event('keypress', {keyCode: 'a'}))
Cuzox

1
@Cuzox, ¿por qué no usar KeyboardEvent? Autocompleta valores como shiftKey y es la forma correcta. Además, pones una cadena en keyCode, eso está mal.
SuperOP535

77
Si necesita Ctrl: el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 70, ctrlKey: true }));(Esto provocará un atajo Ctrl + F)
Илья Зеленько

31

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

2
keydownno se detecta el evento, o estoy haciendo algo mal aquí? fiddle.jshell.net/Palestinian/8d8J9
Omar

@cloak: funciona. Consulte mi comentario aquí para obtener un selector completo para arreglar los controles asp.net: codeproject.com/Tips/269388/… Asegúrese de llamarlo después de insertar cualquier cosa en el dom si usa Ajax.
Dan Randolph el

23

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

77
¿Puedes proporcionar algunos ejemplos de uso? ¿Cómo se usaría su función para enviar un código clave?
Mac

66
El código fuente de esta publicación se puede encontrar en el siguiente enlace que incluye documentación: plainjs.com/javascript/events/trigger-an-event-11
Kieren Dixon

17

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


12

Ahora puedes hacer:

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

2

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

1

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.


1

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

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

1
@CamiRodriguez todo lo que puede hacer en TypeScript lo puede hacer en JS (al igual que jQuery). Excepto que TypeScript no estropea las sintaxis JS, solo las expande. Si elimina `as KeyboardEventInit` será básicamente un código JS. +1 por la respuesta, gracias.
Gergő Horváth
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.