Estoy tratando de enviar eventos programáticamente para eventos de teclado y mouse.
Hasta ahora son pocas las cosas que he probado. En este momento, puedo enviar eventos del mouse mediante programación y ver los cambios:
const element = document.getElementById("element"); const event = new Event('click', {bubbles: true}); element.dispatchEvent(event);El método anterior funciona bien para Mouse Event . Y he intentado el siguiente método para eventos de teclado:
const element = document.getElementById("input-element"); const event = new KeyboardEvent('keypress', {'key': 'e'}); element.dispatchEvent(event);Aquí parece que el evento se está ejecutando, pero los valores no se actualizan en el campo de entrada.
Hay una serie de eventos que ocurren cuando presiona una tecla. Ninguno de ellos da como resultado que se cambie un valor de entrada, pero puede usar esta función para aproximar lo que sucede cuando se presiona una tecla.
const element = document.getElementById("input-element"); const key = 'e'; var success = triggerKey(key, element); console.log(success?'success':'fail'); function triggerKey(key, element){ if(!/^[az]$/.test(key)) return false; if(!['INPUT','TEXTAREA'].includes(element.tagName)) return false; const events = ['keydown', 'keypress', 'textInput', 'keyup']; events.forEach(event_name=>{ const opts = 'textInput' === event_name ? { inputType: 'insertText', data: key } : { key: key, code: `Key${key.toUpperCase()}` }; const event = 'textInput' === event_name ? new InputEvent('input', opts) : new KeyboardEvent(event_name, opts); element.dispatchEvent(event); if('textInput' === event_name) element.value += key; }); return true; } <input id="input-element">