ejemplos javascript dom javascript-events

javascript - keyup jquery ejemplos



onKeyPress Vs. onKeyUp y onKeyDown (11)

¿Cuál es la diferencia entre estos tres eventos? Al googlear encontré que

El evento KeyDown se activa cuando el usuario presiona una tecla.

El evento KeyUp se activa cuando el usuario libera una clave.

El evento KeyPress se activa cuando el usuario presiona y suelta una tecla. (onKeyDown seguido de onKeyUp)

Entiendo los dos primeros, pero KeyPress no es lo mismo que KeyUp ? (o ¿es posible soltar una tecla ( KeyUp ) sin presionar ( KeyDown )?)

Esto es un poco confuso, ¿puede alguien aclararme esto?

Básicamente, estos eventos actúan de manera diferente según el tipo y la versión de cada navegador, creé una pequeña prueba jsBin y puede verificar la consola para saber cómo se comportan estos eventos en su entorno específico, espero que esta ayuda. http://jsbin.com/zipivadu/10/edit

Consulte aquí el link archivado originalmente utilizado en esta respuesta.

Desde ese enlace:

En teoría, los eventos keydown y keyup representan las teclas presionadas o liberadas, mientras que el evento keypress representa un carácter que se escribe. La implementación de la teoría no es la misma en todos los navegadores.

El evento onkeypress funciona para todas las teclas, excepto ALT, CTRL, MAYÚS y ESC en todos los navegadores, mientras que el evento onkeydown funciona para todas las teclas. Significa que el evento onkeydown captura todas las claves.

Este article de Jan Wolter es la mejor pieza que he encontrado, puede encontrar la copia archivada here si el enlace está muerto.

Explica muy bien todos los eventos clave del navegador,

El evento keydown ocurre cuando se presiona la tecla, seguido inmediatamente por el evento keypress. Luego, el evento keyup se genera cuando se suelta la tecla.

Para comprender la diferencia entre pulsación de tecla y pulsación de tecla , es útil distinguir entre caracteres y teclas . Una tecla es un botón físico en el teclado de la computadora. Un carácter es un símbolo escrito presionando un botón. En un teclado de EE. UU., Presionar la tecla 4 mientras se mantiene presionada la tecla Mayús produce un carácter de "signo de dólar". Este no es necesariamente el caso en todos los teclados del mundo. En teoría, los eventos keydown y keyup representan las teclas presionadas o liberadas, mientras que el evento keypress representa un carácter que se escribe. En la práctica, no siempre es así como se implementa.

Durante un tiempo, algunos browers activaron un evento adicional, llamado textInput , inmediatamente después de presionar una tecla . Las primeras versiones del estándar DOM 3 pretendían esto como un reemplazo para el evento de pulsación de tecla , pero la noción completa fue revocada más tarde. Webkit admitió esto entre las versiones 525 y 533, y me dijeron que IE lo apoyaba, pero nunca lo detecté, posiblemente porque Webkit requería que se llamara textInput mientras que IE lo llamaba textinput .

También hay un evento llamado entrada , compatible con todos los navegadores, que se activa justo después de realizar un cambio en un área de texto o campo de entrada. Normalmente, la pulsación de tecla se disparará, luego el carácter escrito aparecerá en el área de texto, luego la entrada se disparará. El evento de entrada en realidad no proporciona ninguna información sobre qué tecla se escribió, tendría que inspeccionar el cuadro de texto para averiguar qué ha cambiado, por lo que realmente no lo consideramos como un evento clave y no lo documentamos aquí. . Aunque originalmente se definió solo para áreas de texto y de entrada, creo que hay un movimiento hacia la generalización para disparar también sobre otros tipos de objetos.

La mayoría de las respuestas aquí se centran más en la teoría que en cuestiones prácticas y hay algunas grandes diferencias entre la keyup keypress y la keypress en lo que respecta a los valores de campo de entrada, al menos en Firefox (probado en 43).

Si el usuario escribe 1 en un elemento de entrada vacío:

  1. El valor del elemento de entrada será una cadena vacía (valor antiguo) dentro del controlador de keypress

  2. El valor del elemento de entrada será 1 (nuevo valor) dentro del manejador de keyup .

Esto es de importancia crítica si está haciendo algo que se basa en conocer el nuevo valor después de la entrada en lugar del valor actual, como la validación en línea o la tabulación automática.

Guión:

  1. El usuario escribe 12345 en un elemento de entrada.
  2. El usuario selecciona el texto 12345 .
  3. El usuario escribe la letra A

Cuando se dispara el evento de keypress después de ingresar la letra A , el cuadro de texto ahora contiene solo la letra A

Pero:

  1. Field.val () es 12345 .
  2. $ Field.val (). La longitud es 5
  3. La selección del usuario es una cadena vacía (que le impide determinar lo que se eliminó al sobrescribir la selección).

Por lo tanto, parece que el navegador (Firefox 43) borra la selección del usuario, luego dispara el evento de keypress , luego actualiza el contenido de los campos y luego keyup la keypress keyup .

Parece que onkeypress y onkeydown hacen lo mismo (dentro de la pequeña diferencia de teclas de acceso directo ya mencionadas anteriormente).

Puedes probar esto:

<textarea type="text" onkeypress="this.value=this.value + ''onkeypress ''"></textarea><br/> <textarea type="text" onkeydown="this.value=this.value + ''onkeydown ''" ></textarea><br/> <textarea type="text" onkeyup="this.value=this.value + ''onkeyup ''" ></textarea><br/>

Y verá que los eventos onkeypress y onkeydown se activan mientras se presiona la tecla y no cuando se presiona la tecla.

La diferencia es que el evento se activa no una, sino muchas veces (siempre que mantenga presionada la tecla).

Si usa algunos de estos eventos, tenga en cuenta y maneje cuántas veces se ejecuta su código.

Y lo siento por mi inglés las lecciones fueron pobres.

Por un lado, hay un significado obvio: KeyDown se dispara cuando se presiona una tecla, KeyUp se dispara cuando se suelta un botón, KeyPress se dispara cuando se presiona y suelta una tecla.

Por otro lado, algunas teclas disparan algunos de estos eventos y no disparan otros . Por ejemplo, KeyPress ignora eliminar, flechas, inicio / fin, ctrl, alt, shift, etc. mientras que KeyDown y KeyUp no.

Finalmente, hay algunas pragmáticas . Para manejar flechas, probablemente necesitará usar onDownDown: si un usuario presiona "abajo", KeyDown se dispara varias veces (¡y KeyPress se dispara solo una vez!). Además, en algunos casos, puede evitar fácilmente la propagación de KeyDown, pero no puede (o no puede con tanta facilidad) evitar la propagación de KeyUp (por ejemplo, si desea realizar una entrada sin ingresar una nueva línea en el campo de texto). Si desea ajustar la altura de un área de texto al contenido, probablemente no use onKeyDown sino más bien en KeyPress. He usado los 3 en mi proyecto, pero desafortunadamente puede haber olvidado algunas de las pragmáticas.

Solo quería compartir una curiosidad:

cuando se utiliza el evento onkeydown para activar un método JS, el código de caracteres para ese evento NO es el mismo que se obtiene con onkeypress!

Por ejemplo, las teclas del teclado numérico devolverán los mismos códigos de caracteres que las teclas numéricas sobre las teclas de letras cuando se usa onkeypress, pero NO cuando se usa onkeydown!

¡Tardé unos segundos en descubrir por qué mi secuencia de comandos que verificaba ciertos códigos de caracteres fallaba al usar onkeydown!

Demostración: https://www.w3schools.com/code/tryit.asp?filename=FMMBXKZLP1MK

y si. Sé que la definición de los métodos es diferente ... pero lo que es muy confuso es que en ambos métodos el resultado del evento se recupera utilizando event.keyCode ... pero no devuelven el mismo valor ... no es muy Implementación declarativa.

KeyPress , KeyUp y KeyDown son análogos a, respectivamente: Click , MouseUp, y MouseDown .

  1. Down pasa primero
  2. Press pasa segundo (cuando se ingresa texto)
  3. Up último paso ocurre cuando se completa el ingreso de texto.

La excepción es webkit , que tiene un evento adicional allí:

keydown keypress textInput keyup

Editar Vsync agregó un fragmento de demostración hace unos meses, pero justo ahora lo he eliminado porque ya no funciona, con el siguiente error: "No se detectó DOMException: no se pudo leer la propiedad ''localStorage'' de ''Ventana'': el documento es "Recuadro de arena y carece de la bandera ''permitir el mismo origen''". Puedes probarlo en una página de prueba, sin embargo:

window.addEventListener("keyup", log); window.addEventListener("keypress", log); window.addEventListener("keydown", log); function log(event){ console.log( event.type ); }

onkeydown se dispara cuando la tecla está presionada (como en los accesos directos; por ejemplo, en Ctrl+A , Ctrl se mantiene ''presionada'').

onkeyup se onkeyup cuando se suelta la tecla (incluidas las teclas modificador / etc)

onkeypress se onkeypress como una combinación de onkeydown y onkeyup , o dependiendo de la repetición del teclado (cuando onkeyup no se activa). (Este comportamiento de repetición es algo que no he probado. ¡Si realiza una prueba, agregue un comentario!)

textInput (solo webkit) se activa cuando se ingresa algún texto (por ejemplo, Shift+A ingresaría en mayúscula ''A'', pero Ctrl+A seleccionaría texto y no ingresaría ningún ingreso de texto. En ese caso, todos los demás eventos se activan)

KeyDown - cuando presionas físicamente la tecla hacia abajo

KeyUp - cuando sueltas físicamente una tecla

Pulsar tecla - a medida que se ingresan los caracteres ... Pulsar una tecla, presionar una tecla, mientras que las otras solo se dispararán una vez.