Cross-browser y cross-time
Antes que nada, hay que advertir que el mecanismo de hacer esta "captura de
pulsaciones de teclado" ha ido evolucionando al mismo ritmo que han ido evolucionando los diferentes navegadores. Es decir, que si queremos tener un script cross-browser (funcional en "todos" los navegadores), hay que ir con cuidadito y posiblemente el script que utilicemos hoy de aquí a 2 años ya no funcionará en los navegadores más modernos. Creo que es necesario advertirlo porque si uno busca este tema por internet encontrará mil y una soluciones no coincidentes y con resultados distintos. Así que mi consejo es doble: fijaros en la fecha del post y en todo caso, haced vosotros mismos unas cuantas pruebas del script que vayais a implementar ;)
Código HTML
1 <html>
2 <h3>Ejemplo de capturar la pulsacion de INTRO en una caja de texto</h3>
3 <p>Danos tu email:
4 <input type='text' id='email'
5 onkeypress="javascript:if (getKeyCode(event)==13) alert('Gracias.')" />
6 </p>
7 <script>
8 function getKeyCode(e){
9 e= (window.event)? event : e;
10 intKey = (e.keyCode)? e.keyCode: e.charCode;
11 return intKey;
12 }
13 </script>
14 </html>Yo he probado que funciona en IE6, IE7, FF2 y FF3, estando a Septiembre de 2008. No puedo comprobarlo en otros navegadores porque no tengo más instalados, pero si alguien lo hace, por favor, comenta aquí tu resultado ;)
Nota: en vuestros comentarios leo que también funciona sin problemas en Opera 9.62
Nota: la sintaxis utilizada en la línea e= (window.event)?event:e; se llama asignación abreviada. Si no las ha utilizado nunca, lee esta breve explicación que acabo de postear.
Ampliación 04-02-2009: onKeyUp
La semana pasada decubrí que se puede usar onKeyUp en lugar de onKeyPress, y ciertamente con mejores resultados. Voy a explicar brevemente la diferencia porque creo que a más de uno le va a interesar.
Obviamente ya sabemos todos los que hemos programado en otros lenguajes que contienen eventos que ambos son muy parecidos. Pero en concreto, me gustó más el resultado obtenido con onKeyUp porque detecta "mejor" el momento en el que los valores de la caja de texto cambian! He rehecho la página de ejemplo para que podáis probar la diferencia.
En donde se aprecia muy bien la diferencia es haciendo lo siguiente: escribimos algo de texto en la caja (probadlo en ambas cajas para ver la diferencia) y el texto se irá "copiando" automaticamente en una etiqueta span que tengamos debajo. Hasta aquí ambos eventos funcionan "aparentemente" igual: cada vez que escribimos una letra, se dispara el evento y replica el contenido de la caja en el span.
Sin embargo, una vez tengais escrito algo de texto, seleccionad parte del texto y pulsad una tecla cualquiera y veréis la diferencia entre ambos eventos: onKeyPress no actualiza el contenido del span, pero onKeyUp sí lo hace!. es decir, sí lo hace, pero solamente si luego seguimos pulsando más teclas, pero no lo hace inmediatamente :(Jejeje, no me preguntéis el porqué ocurre eso, pero creo que nos es útil saberlo, verdad?! Yo lo descubrí proque estaba haciendo una especie de calculadora de precios: necesitaba que en el span saliera automaticamente el precio con IVA de un precio que yo introducía en un input, y necesitaba que funcionara sincronizadamente (como sucede usando onKeyUp).
