attribute - onkeyup javascript ejemplo

Comportamiento del evento Keyup en la pestaña

Question

HTML:

<form id="myform">
    <input id="firstfield" name="firstfield" value="100" type="text" />
    <input id="secondfield" name="secondfield" value="200" type="text" />
</form>

jQuery:

jQuery(document).ready(function() {
    $(''#firstfield'').keyup(function() {
      alert(''Handler for firstfield .keyup() called.'');
    });
    $(''#secondfield'').keyup(function() {
      alert(''Handler for secondfield .keyup() called.'');
    });
});

Demostración: http://jsfiddle.net/KtSja/3/

En esta demostración, si coloca el cursor en el primer campo y luego se despliega (sin hacer ningún cambio), el evento keyup se dispara en el segundo campo. es decir, estás saliendo del primer campo y dentro del segundo campo. ¿Es correcto este comportamiento? ¿Cómo puedo evitar que esto suceda? Lo mismo se aplica a Mayús + tabulador.

Nota:

a) Creo que todas las demás claves, imprimibles y no imprimibles, activan el evento keyup en el primer campo.

b) El evento no se activa en absoluto si mantienes presionada la pestaña hasta que sale de ambos campos.

Answer 1

Es el comportamiento esperado. Si nos fijamos en la serie de eventos que suceden:

1. Presione la tecla Tab mientras el foco está en el primer cuadro de texto
2. Desencadenar evento clave hacia abajo en el primer cuadro de texto
3. Mover el foco al segundo cuadro de texto
4. Quitar el dedo de la tecla de tabulación
5. El evento Keyup se activa en el segundo cuadro de texto

El teclado hacia arriba se activa para el segundo cuadro de texto porque ahí es donde ocurre desde que se cambió el enfoque a esa entrada.

No puede evitar que suceda esta secuencia de eventos, pero puede inspeccionar el evento para ver qué tecla se presionó y llamar a preventDefault() si era la tecla de tabulación.

Answer 2

Hace poco estuve lidiando con esto por un marcador de posición polyfill . Descubrí que si desea capturar el evento keyup en el campo de origen, puede escuchar el evento keydown y disparar el evento keyup si se presionó una pestaña.

En lugar de esto:

$(this).on({''keyup'': function() {
                //run code here
            }
        });

Cambie a esto:

$(this).on({''keydown'': function(e) {
                // if tab key pressed - run keyup now
                if (e.keyCode == 9) {
                    $(this).keyup();
                    e.preventDefault;
                }
            },
            ''keyup'': function() {
                //run code here
            }
        });

Answer 3

La acción predeterminada de una tecla se realiza durante el evento de keydown , por lo que, naturalmente, cuando la keyup propaga, la tecla Tab ha cambiado el enfoque al siguiente campo.

Puedes usar:

jQuery(document).ready(function() {
    $(''#firstfield, #secondfield'').on({
        "keydown": function(e) {
            if (e.which == 9) {
                alert("TAB key for " + $(this).attr("id") + " .keydown() called.");
            }
        },
        "keyup": function(e) {
            if (e.which != 9) {
                alert("Handler for " + $(this).attr("id") + " .keyup() called.");
            }
        }
    });
});

De esta forma, si se presiona la tecla Tab, puede hacer los ajustes necesarios antes de manejar otras teclas. Vea su violín actualizado para un ejemplo.

Editar

Basado en tu comentario, renové la función. El JavaScript terminó siendo un poco complicado, pero haré mi mejor esfuerzo para explicarlo. Sigue con la nueva demo aquí.

jQuery(document).ready(function() {
    (function($) {
        $.fn.keyAction = function(theKey) {
            return this.each(function() {
                if ($(this).hasClass("captureKeys")) {
                    alert("Handler for " + $(this).attr("id") + " .keyup() called with key "+ theKey + ".");
                    // KeyCode dependent statements go here.
                }
            });
        };
    })(jQuery);

    $(".captureKeys").on("keydown", function(e) {
        $("*").removeClass("focus");
        $(this).addClass("focus");
    });
    $("body").on("keyup", "*:focus", function(e) {
        if (e.which == 9) {
            $(".focus.captureKeys").keyAction(e.which);
            $("*").removeClass("focus");
        }
        else {
            $(this).keyAction(e.which);
        }
    });
});

Básicamente, le das a class="captureKeys" cualquier elemento en el que quieras monitorear las pulsaciones de teclas. Mira esa segunda función primero: cuando se dispara keydown en uno de tus elementos captureKeys , se le asigna una clase ficticia llamada focus . Esto es solo para hacer un seguimiento del elemento más reciente para tener el enfoque (le he dado a .focus un fondo en la demostración como una ayuda visual). Por lo tanto, no importa qué tecla se presione, el elemento actual sobre el que se presiona recibe la clase .focus , siempre y cuando también tenga .captureKeys .

A continuación, cuando se keyup cualquier lugar (no solo en los elementos .captureKeys ), la función verifica si se trata de una pestaña. Si fue así, entonces el enfoque ya se ha movido, y se llama a la función .keyAction() personalizada en cualquier elemento que haya sido el último en enfocar ( .focus ). Si no era una pestaña, entonces se llama a .keyAction() en el elemento actual (pero, nuevamente, solo si tiene .captureKeys ).

Esto debería lograr el efecto que deseas. Puede usar la variable theKey en la función keyAction() para realizar un seguimiento de qué tecla se presionó , y actuar en consecuencia.

Una advertencia principal a esto: si un elemento .captureKeys es el último elemento en el DOM , al presionar la tecla Tab se eliminará el enfoque del documento en la mayoría de los navegadores, y el evento keyup nunca se activará. Es por eso que agregué el enlace ficticio en la parte inferior de la demostración.

Esto proporciona un marco básico, por lo que depende de usted modificarlo para adaptarlo a sus necesidades. Espero eso ayude.

Answer 4

Terminé usando esta solución:

HTML:

<form id="myform">
    <input id="firstfield" name="firstfield" value="100" type="text" />
    <input id="secondfield" name="secondfield" value="200" type="text" />
</form>

jQuery:

jQuery(document).ready(function () {
    $(''#firstfield'').keyup(function (e) {
        var charCode = e.which || e.keyCode; // for cross-browser compatibility
        if (!((charCode === 9) || (charCode === 16)))
            alert(''Handler for firstfield .keyup() called.'');
    });
    $(''#secondfield'').keyup(function (e) {
       var charCode = e.which || e.keyCode; // for cross-browser compatibility
       if (!((charCode === 9) || (charCode === 16)))
            alert(''Handler for secondfield .keyup() called.'');
    });
});

Esta solución no ejecuta la alerta si la clave es la pestaña, el turno o ambos.

Solución: http://jsfiddle.net/KtSja/13/