teclado - ¿Cómo simular pulsaciones de teclas o hacer clic con JavaScript?

simular tecla javascript

Question

Escribí una extensión de Google Chrome y el sitio en el que quiero usar mi extensión requiere que haga clic o tabice en un cuadro de texto (porque creo que solo ejecuta la verificación de javaScript "onClick"). Puedo obtener el texto en la casilla con mi extensión usando:

document.getElementById("input1").value = ''test'';

Pero cuando hago clic en enviar, cree que no ingresé nada en el cuadro de texto "input1" porque nunca hice clic en él ni lo tabulé.

¿Alguien puede ayudarme a superar esto?

Answer 1

Simulando un clic del mouse

Mi suposición es que la página web está escuchando mousedown en lugar de hacer clic (lo cual es malo para la accesibilidad porque cuando un usuario usa el teclado, solo el foco y el clic se disparan, no mousedown). Por lo tanto, debe simular mousedown, click y mouseup (que, dicho sea de paso, es lo que el iPhone, iPod Touch y el iPad hacen al tocar eventos ).

Para simular los eventos del mouse, puede usar este fragmento para navegadores compatibles con DOM 2 Events . Para una simulación más infalible, complete la posición del mouse con initMouseEvent en initMouseEvent lugar.

// DOM 2 Events
var dispatchMouseEvent = function(target, var_args) {
var e = document.createEvent("MouseEvents");
// If you need clientX, clientY, etc., you can call
// initMouseEvent instead of initEvent
e.initEvent.apply(e, Array.prototype.slice.call(arguments, 1));
target.dispatchEvent(e);
};
dispatchMouseEvent(element, ''mouseover'', true, true);
dispatchMouseEvent(element, ''mousedown'', true, true);
dispatchMouseEvent(element, ''click'', true, true);
dispatchMouseEvent(element, ''mouseup'', true, true);

Cuando active un evento de clic simulado, el navegador activará la acción predeterminada (por ejemplo, navegue al href del enlace o envíe un formulario).

En IE, el fragmento equivalente es este (no verificado, ya que no tengo IE). No creo que pueda dar las posiciones del mouse del manejador de eventos.

// IE 5.5+
element.fireEvent("onmouseover");
element.fireEvent("onmousedown");
element.fireEvent("onclick"); // or element.click()
element.fireEvent("onmouseup");

Simulación de keydown y keypress

Puede simular eventos de pulsación de teclas y pulsación de tecla, pero desafortunadamente en Chrome solo activan los controladores de eventos y no realizan ninguna de las acciones predeterminadas. Creo que esto se debe a que el borrador de trabajo de DOM 3 Events describe este orden funky de eventos clave :

1. keydown (a menudo tiene acción predeterminada como fire click, submit, o textInput events)
2. pulsación de tecla (si la tecla no es solo una tecla modificadora como Shift o Ctrl)
3. (keydown, keypress) con repeat = true si el usuario mantiene presionado el botón
4. acciones predeterminadas de keydown !!
5. tecla Arriba

Esto significa que tienes que (mientras se combinan los borradores de eventos HTML5 y DOM 3 ) simular una gran cantidad de lo que el navegador haría de otra manera. Odio cuando tengo que hacer eso. Por ejemplo, esto es más o menos cómo simular una pulsación de tecla en una entrada o área de texto.

// DOM 3 Events
var dispatchKeyboardEvent = function(target, initKeyboradEvent_args) {
var e = document.createEvent("KeyboardEvents");
e.initKeyboardEvent.apply(e, Array.prototype.slice.call(arguments, 1));
target.dispatchEvent(e);
};
var dispatchTextEvent = function(target, initTextEvent_args) {
var e = document.createEvent("TextEvent");
e.initTextEvent.apply(e, Array.prototype.slice.call(arguments, 1));
target.dispatchEvent(e);
};
var dispatchSimpleEvent = function(target, type, canBubble, cancelable) {
var e = document.createEvent("Event");
e.initEvent.apply(e, Array.prototype.slice.call(arguments, 1));
target.dispatchEvent(e);
};
var canceled = !dispatchKeyboardEvent(element,
''keydown'', true, true, // type, bubbles, cancelable
null, // window
''h'', // key
0, // location: 0=standard, 1=left, 2=right, 3=numpad, 4=mobile, 5=joystick
''''); // space-sparated Shift, Control, Alt, etc.
dispatchKeyboardEvent(
element, ''keypress'', true, true, null, ''h'', 0, '''');
if (!canceled) {
if (dispatchTextEvent(element, ''textInput'', true, true, null, ''h'', 0)) {
element.value += ''h'';
dispatchSimpleEvent(element, ''input'', false, false);
// not supported in Chrome yet
// if (element.form) element.form.dispatchFormInput();
dispatchSimpleEvent(element, ''change'', false, false);
// not supported in Chrome yet
// if (element.form) element.form.dispatchFormChange();
}
}
dispatchKeyboardEvent(
element, ''keyup'', true, true, null, ''h'', 0, '''');

No creo que sea posible simular eventos clave en IE.

Answer 2

Focus podría ser lo que estás buscando. Al tabular o hacer clic creo que te refieres a darle al elemento el foco. Mismo código que Russ (lo siento, lo robé: P) pero disparando otro evento.

// this must be done after input1 exists in the DOM
var element = document.getElementById("input1");
if (element) element.focus();

Answer 3

O incluso más corto, con solo Javascript moderno estándar:

var first_link = document.getElementsByTagName(''a'')[0];
first_link.dispatchEvent(new MouseEvent(''click''));

El new MouseEvent constructor new MouseEvent toma un nombre de tipo de evento requerido, luego un objeto opcional (al menos en Chrome). Entonces, podría, por ejemplo, establecer algunas propiedades del evento:

first_link.dispatchEvent(new MouseEvent(''click'', {bubbles: true, cancelable: true}));

Answer 4

Para simular eventos de teclado en Chrome:

Hay un error relacionado en el kit web que los eventos del teclado cuando se inicializan con initKeyboardEvent obtienen un código de clave incorrecto y un código de estado de 0: https://bugs.webkit.org/show_bug.cgi?id=16735

Una solución de trabajo para ello se publica en esta respuesta SO .

Answer 5

puedes elevar el evento click sobre un elemento haciendo

// this must be done after input1 exists in the DOM
var element = document.getElementById("input1");
if (element) element.click();

Ejemplo aquí