1

necesito disparar un evento de teclado keydown simulando que el usuario presiono la tecla escape.

window.addEventListener('load', init, false);

function init() {
  var input1 = document.querySelector('input[name="text1"]');
  input1.addEventListener('keydown', metodo1, false);
  var button1 = document.querySelector('input[name="button1"]');
  button1.addEventListener('click', metodo2, false);
}

function metodo1(e) {
  if (e.key == 'Escape') {
    e.target.value = '';
  }
}

function metodo2(e) {
  //aqui necesito dispara el evento de teclado keydown del
  // input1 simulando que el usuario presiono la tecla escape
  // algo mas o menos asi:
  // var event = new MouseEvent('click');
  // var element = document.querySelector('input[name="text1"]');
  // element.dispatchEvent(event);
  // pero que sea un evento de teclado que simule que se ha presionado la 
  //tecla Escape
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <input type="text" name="text1">
  <input type="button" name="button1" value="presionar">

</body>

</html>

4
  • Podras disparar eventos pero nunca eventos verdaderos, los eventos verdaderos son aquellos que activan la secuencia por defecto, por ejemplo si un input recibe un evento keydown keypress, el navegador actualizará el DOM, si no es un evento verdadero, entonces no hará nada el 18 dic. 2017 a las 16:19
  • Si puedas agregar para hacer que exactamente, para al menos tener una idea de lo que quieres.
    – Einer
    el 18 dic. 2017 a las 16:20
  • 1
    Dependiendo de lo que quieras hacer, podrías hacer simplemente un llamado a la función: metodo1({key: 'Escape', target: element}); . Aunque probablemente harías mejor extrayendo el código común de ambos métodos a una función, y llamándola desde ambos eventos.
    – delCano
    el 18 dic. 2017 a las 16:31
  • gracias por el comentario, pero me gustaría que sea el despachador de eventos que llame al método asignado para ese evento, el problema es que no como hacerlo, ya he buscado en tutoriales y no he encontrado como hacerlo.
    – Neyer
    el 18 dic. 2017 a las 16:35

2 respuestas 2

2

Si tu intención es generar eventos para reemplazar la entrada del usuario me temo que no es posible. La w3c provee mecanismos para identificar si un evento es generado por el user-agent (o el usuario a través de él), si es un evento creado por un script entonces no ejecutará los controladores por defecto (deberás recrear su comportamiento por completo).

;(function() {
const ESCAPE_KEY = 'Escape'

function robotController(e)
{
    if (e.isTrusted) {
        console.warn('No eres un robot')
        e.preventDefault()
        return
    }
    if (ESCAPE_KEY == e.code) {
        console.log('Robot ha presionado ESC')
    }
}
const reI = document.querySelector('#RobotEvents')

reI.addEventListener('keypress', robotController, false)
reI.dispatchEvent(new KeyboardEvent('keypress', {key: ESCAPE_KEY, code: ESCAPE_KEY}))
}())
<input id="RobotEvents" type="text" placeholder="Prueba escribir" />

El anterior código muestra como identificar fácilmente los eventos de robots a través de e.isTrusted, el hacer e.preventDefault() cancela los controladores por defecto, es decir, no se agregará texto alguno al widget. Los eventos creados vía JavaScript tienen un e.preventDefault() implicitamente.

1
  • Gracias por el aporte Eduen Sarceño
    – Neyer
    el 18 dic. 2017 a las 18:12
1

Lo lógico sería crear una función que es llamada cuando haces click sobre el botón y cuando pulsas escape en el campo de texto, así no tendrías que simular nada, pero si realmente quieres simular el evento, no tienes más que crearlo y luego dispararlo:

window.addEventListener('load', init, false);

function init() {
  var input1 = document.querySelector('input[name="text1"]');
  input1.addEventListener('keydown', metodo1, false);
  var button1 = document.querySelector('input[name="button1"]');
  button1.addEventListener('click', metodo2, false);
}

function metodo1(e) {
  if (e.key == 'Escape') {
    e.target.value = '';
  }
  console.log(e.key)
}

function metodo2(e) {
  let event = new KeyboardEvent('keydown', { key: 'Escape'});
   var input1 = document.querySelector('input[name="text1"]');
   input1.dispatchEvent(event);
  
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <input type="text" name="text1">
  <input type="button" name="button1" value="presionar">

</body>

</html>

Puedes encontrar más información en la web de MDN

3
  • gracias, esto era lo que necesitaba
    – Neyer
    el 18 dic. 2017 a las 16:37
  • Me temo que no es la solución, los robots no dispararán los controladores por defecto. No tiene sentido usarlos si no se replica el comportamiento por completo, tambien equivocas conceptos e.key es la representación real del evento (en caso de ser imprimible) ,si quieres evaluar la tecla ESC deberás usar e.code ya que hacer e.key en un caracter no imprimible es un comportamiento indefinido. el 18 dic. 2017 a las 16:56
  • ¿Qué robots, los de los buscadores? En la pregunta no indica nada sobre esto, el OP simplemente ha preguntado como generar eventos "sintéticos". Y sobre la tecla ESC, la documentación de MDN no la indica como comportamiento indefinido el 18 dic. 2017 a las 17:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.