javascript - una - Tengo problemas con el evento de selección de teclas y autocompletado en Firefox en Mac

quitar autocompletar mozilla firefox

Question

Esto me está volviendo loco. Es difícil de explicar, pero voy a intentarlo.

Tengo un campo de texto de entrada en la página principal de mi sitio. He codificado un observador de evento keydown que verifica el código de clave y si está ENTER (o equiv), verificará el valor de entrada (correo electrónico). Si el correo electrónico es válido y único en el DB, deberá enviar el formulario. Cosas básicas, o eso pensarías.

Si escribo mi dirección de correo electrónico en el campo y presiono enter, funciona bien en todos los navegadores. Sin embargo, si escribo el primer par de letras, y luego uso las teclas de flecha para seleccionar el correo electrónico del cuadro desplegable del historial (espero que sepas lo que quiero decir aquí), y luego presionar enter, el resultado es diferente. El valor del campo de formulario se captura como solo el par de letras que escribí y, por lo tanto, la validación está fallando. Parece que cuando presiono la tecla enter para "seleccionar" el correo electrónico del menú desplegable del historial, el navegador lo interrumpe como si estuviera escribiendo.

En Chrome y Safari funciona como debería. Como debería, significa que cuando presiona ingresar para "seleccionar" el correo electrónico del menú desplegable de historial, todo lo que hace es poner esa dirección de correo electrónico en el cuadro de texto. Solo en la segunda tecla ENTER presionar activa el observador del evento y se valida el correo electrónico.

Espero que alguien pueda arrojar algo de luz sobre por qué está sucediendo esto ... Mi intuición es que es algo del navegador y será algo que no puedo solucionar.

Gracias Lee

EDITAR: Para agregar una aclaración a mi pregunta, déjenme agregar que estoy usando el evento "keydown" para capturar el momento cuando se presiona la tecla enter. He intentado el evento "keyup" y esto resolvió mi problema anterior, pero parece que no puedo detener el envío del formulario por sí mismo. El evento "keyup" se desencadena DESPUÉS del comportamiento predeterminado, por lo tanto, no es la elección correcta para esto.

MÁS EDITACIÓN:

Gracias de nuevo, y por cierto, su inglés es excelente (en respuesta a su comentario sobre el inglés malo).

He cambiado mi controlador de eventos de esto:

$("emailInputBox").observe("keydown", function(event) {
    return submitViaEnter(event, submitSignupFormOne);
});

a esto:

$("emailInputBox").observe("keydown", function(event) {
    setTimeout(submitViaEnter.curry(event, submitSignupFormOne),0);
});

submitViaEnter :

function submitViaEnter(event, callback) {
var code = event.keyCode;
if (code == Event.KEY_RETURN) {
    event.stop();
    return callback(event);
}
return true;
}

Parece que funciona, pero el problema ahora es que el navegador puede llevar a cabo la acción predeterminada antes de ejecutar la función submitViaEnter , lo que significa que el formulario se envía cuando submitViaEnter ENTER.

Answer 1

bien ordenado. Muchas gracias por su ayuda. Era la función de curry que me faltaba antes. Estaba tratando de trabajar en el evento dentro del alcance de la función setTimeout.

Esto funciona a continuación. El submitViaEnter se llama desde el eventobserver y responde al evento keyDown:

function submitViaEnter(event, callback) {
var code = event.keyCode;
if (code == Event.KEY_RETURN) {
    event.stop();
    setTimeout(callback.curry(event),0);        
    // return callback(event);
    // return false;    
}
return true;
}

La detención de la acción predeterminada dentro de eventObserver significaba que no se podían escribir caracteres. Así que me quedé dentro de la cláusula de la tecla ENTER.

Answer 2

Responder a la pregunta original

Sí, es un error de Gecko (aunque no es específico de Mac).

La última parte de este comentario contiene la descripción de la solución alternativa: use el tiempo de espera.

[editar] ya que solicitó la aclaración del error

Cuando presiona Enter y el autocompletado está activo, Firefox (erróneamente) primero activa el controlador de teclas de la página, luego el manejador de claves internas del navegador que cierra el menú emergente de autocompletar y actualiza el valor del área de texto, mientras que podría dispararse al autocompletar ventana emergente y solo dejar que la página sepa el valor del cuadro de texto cambiado.

Esto significa que cuando se llama al controlador de clave, el controlador de autocompletar aún no se ha ejecutado: la ventana emergente de autocompletar todavía está abierta y el valor del cuadro de texto es como antes de que se completara la autocompletación.

Cuando agrega una llamada setTimeout a su manejador de teclas, le dice al navegador "hey, ejecute esta función justo después de que haya terminado de hacer las cosas que ya están en su lista de tareas P1". Por lo tanto, se ejecuta el controlador de autocompletar, ya que ya está en la lista de tareas pendientes, luego se ejecuta el código que ejecuta en un tiempo de espera, cuando la ventana emergente de autocompletar ya está cerrada y el valor del cuadro de texto actualizado.

[edit] respondiendo la pregunta en "Editar más"

Derecha. Debe cancelar la acción predeterminada en el controlador de eventos, no en el tiempo de espera, si desea que funcione:

function onKeyPress(ev) {
  if (... enter pressed ...) {
    setTimeout(function() {
      ... check the new textbox value after letting autocomplete work ...
    }, 0);
    // but cancel the default behavior (submitting the form) directly in the event listener
    ev.preventDefault();
    return false;
  }
}

Si aún desea enviar el formulario en Ingresar, sería un ejercicio más interesante, pero parece que no lo hace.