javascript - teclado - keyup jquery ejemplos

¿Desencadenar un evento de pulsación de tecla/pulsación/tecla en JS/jQuery?

Question

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

No quiero poner texto en el cuadro de entrada, solo quiero activar todos los manejadores de eventos que normalmente serían activados por un usuario escribiendo información en un cuadro de entrada. Esto significa foco, keydown, keypress, keyup y blur. Creo.

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

Answer 1

Ahora puede hacer:

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

Answer 2

Aquí hay un ejemplo js vainilla 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);
}
}

Answer 3

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 de clics del mouse al usar este sitio: https://www.youtube.com/tv . Puedes 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

Answer 4

Para desencadenar una tecla Enter , tuve que modificar la respuesta @ebynum, específicamente, usando la propiedad keyCode.

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

Answer 5

Podría despachar eventos como

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

Answer 6

Puede activar cualquiera de los eventos con una llamada directa a ellos, como esta:

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

¿Hace eso lo que intentas hacer?

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

Si desea desencadenar los eventos clave con claves específicas, puede hacerlo así:

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

Hay una discusión interesante sobre los eventos de pulsación de tecla aquí: jQuery Evento Pulsación de tecla: ¿Qué tecla se presionó? , específicamente con respecto a la compatibilidad de navegadores cruzados con la propiedad .which.

Answer 7

Puede lograr esto con: EventTarget.dispatchEvent(event) y pasando un nuevo evento 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" />

Despacho MDNEvento

MDN KeyboardEvent

Answer 8

Una pulsación de tecla es uno de los eventos de teclado en jquery, que es una manera fácil y rápida de agregar oyente de pulsación de tecla a cualquier elemento HTML. Este evento ocurre cuando alguien hace clic en un botón en el teclado. Este evento es similar al evento keydown pero el evento keypress no se activa para las teclas modificadoras y no impresoras como ALT, CTRL, SHIFT, ESC y eliminar.

Puede obtener más detalles de here también.