teclado - Simulando una pulsación de tecla con JavaScript

key event listener javascript

Question

Me gustaría que el navegador actúe como si el usuario hubiera presionado la tecla Tab al hacer clic en algo. En el controlador de clic he intentado los siguientes enfoques:

var event = document.createEvent(''KeyboardEvent'');
event.initKeyEvent("keypress", true, true, null, false, false, false, false, 9, 0);
this.input.focus()[0].dispatchEvent(event);

Y jQuery:

this.input.focus().trigger({ type : ''keypress'', which : 9 });

... que tomé de here .

El primer enfoque parece ser la mejor opción, pero no funciona del todo. Si cambio los últimos dos parámetros a 98, 98, de hecho, se escribe una ''b'' en el cuadro de entrada. Pero 9, 0 y 9, 9 (el primero de los cuales tomé directamente del sitio web de MDC) me dan estos errores en Firebug bajo FF3:

Permission denied to get property XULElement.popupOpen
[Break on this error] this.input.focus()[0].dispatchEvent(event);

Permission denied to get property XULElement.overrideValue
[Break on this error] this.input.focus()[0].dispatchEvent(event);

Permission denied to get property XULElement.selectedIndex
[Break on this error] this.input.focus()[0].dispatchEvent(event);

Permission denied to set property XULElement.selectedIndex
[Break on this error] this.input.focus()[0].dispatchEvent(event);

He escuchado que tales eventos (sin una definición clara de "tales") son "no confiables", lo que podría explicar estos errores.

El segundo enfoque hace que el valor que puse como evento, que se pasa como evento.que no tenga ningún efecto (incluso si uso 98 en lugar de 9, no se escriba ''b'' en el cuadro). Si intento configurar un evento .data en el objeto que estoy pasando, termina indefinido cuando se desencadena el evento. Lo que sigue es el código que estoy usando para ver eso:

$(''#hi'').keypress(function(e) {
  console.log(e);
});

¿Alguna otra idea?

Answer 1

Creo que esos errores son de autocompletar. Es posible que pueda desactivarlas configurando, antes de enviar el evento, el atributo autocompletar a ''apagado''

setAttribute(''autocomplete'',''off'')

Answer 2

En realidad, creo que hay una manera, incluso si es un PITA importante. Puedo asegurarme de que cada elemento, aunque sea una parada de tabulación, tenga un Xtabindex, de alguna manera en el orden correcto, aunque esté ingresando los widgets de otras personas y, por lo tanto, use jQuery para agregarlos después del hecho, en lugar de capaz de especificarlo directamente en el código HTML u otro código de construcción inicial. Entonces, todo mi formulario tendrá un tabindex real. Si bien tiene el enfoque, absorberá las pulsaciones de teclas, y si son tab o shift + tab, mueva el foco falso basado en Xtabindex. Si se presiona la pestaña en el último elemento (o Mayús + tab en el primer elemento) en el formulario, no se ingerirá la combinación de teclas, lo que permitirá que el navegador se enfoque correctamente en otras páginas o elementos de la IU del navegador fuera del formulario utilizando el teclado.

Solo puedo adivinar qué tipo de efectos secundarios no deseados introducirá este enfoque.

En realidad, ni siquiera es una solución, porque todavía no puedo falsificar una pestaña en el último elemento que lo usa.

Answer 3

Esta es la solución que usé en nuestra aplicación web para dos controles personalizados, un calendario emergente y un selector de peso de unidad / valor emergente (al hacer clic en el cuadro de texto aparece un div con dos selecciones)

function tab_focus(elem)
  var fields = elem.form.getElements()
  for(var i=0;i<fields.length;i++) {
    if(fields[i].id == elem.id){
      for(i=i+1;i<fields.length;i++){
        if(fields[i].type != ''hidden''){
          fields[i].focus()
          return    
        }
      }
      break;
    }
  }
  elem.form.focusFirstElement();
}

Esto utiliza el marco de Prototype y espera un elemento extendido (es decir, $ (''thing_id'')) como su parámetro.

Obtiene la forma a la que pertenece el elemento y recorre los elementos de la forma hasta que se encuentra a sí mismo.

Luego busca el primer elemento que no está oculto, y le pasa el enfoque.

Si no hay ningún elemento detrás de él en el formulario, mueve el foco hacia el primer elemento del formulario. En su lugar, podría encontrar el siguiente formulario en la página a través de document.forms, pero la mayoría de nuestras páginas usan un solo formulario.

Answer 4

He creado un complemento simple de jQuery que resuelve este problema. Utiliza el selector '': tabbable'' de jQuery UI para encontrar el siguiente elemento ''tabbable'' y lo selecciona.

Ejemplo de uso:

// Simulate tab key when element is clicked 
$(''.myElement'').bind(''click'', function(event){
    $.tabNext();
    return false;
});

Answer 5

La solución con la que acabé de ir es crear un div "ladrón de foco" (con tabindex = -1 - puede tener el foco pero no se puede tabular inicialmente) en cualquier lado del área en la que quiero administrar manualmente el foco. Luego puse a un oyente de eventos burbujeante para enfocar y desenfocar todo el área. Cuando se produce un enfoque en el área, los valores de tabindex se cambian a -1, y cuando se produce un desenfoque, se cambian a 0. Esto significa que mientras se enfoca en el área, puede presionar o desplazar la pestaña hacia fuera para termine correctamente en otros elementos de la página o en los elementos de la interfaz de usuario del navegador, pero tan pronto como se enfoca fuera de allí, los ladrones de enfoque se vuelven tabulables, y al enfocar configuran el área manual correctamente y desvían el foco hacia el elemento en su extremo, como si hubiera hecho clic en un extremo o en el otro del área manual.