Este post fue aprobado por expertos para que tengas la seguridad de la exactitud de nuestra esta crónica.
Solución:
Con JavaScript simple, el más simple es:
document.onkeypress = function (e)
e = e ;
Pero con esto, solo puede vincular un controlador para el evento.
Además, puede utilizar lo siguiente para poder vincular potencialmente varios controladores al mismo evento:
addEvent(document, "keypress", function (e) );
function addEvent(element, eventName, callback)
if (element.addEventListener)
element.addEventListener(eventName, callback, false);
else if (element.attachEvent)
element.attachEvent("on" + eventName, callback);
else
element["on" + eventName] = callback;
En cualquier caso, keyCode no es coherente en todos los navegadores, por lo que hay más que comprobar y averiguar. Observe la e = e || window.event – ese es un problema normal con Internet Explorer, poner el evento en window.event en lugar de pasarlo a la devolución de llamada.
Referencias:
- https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/keypress
- https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener
Con jQuery:
$(document).on("keypress", function (e)
// use e.which
);
Referencia:
- http://api.jquery.com/on/
Aparte de que jQuery es una biblioteca “grande”, jQuery realmente ayuda con las inconsistencias entre los navegadores, especialmente con los eventos de ventana … y eso no se puede negar. Con suerte, es obvio que el código jQuery que proporcioné para su ejemplo es mucho más elegante y más corto, pero logra lo que desea de una manera consistente. Deberías poder confiar en que e (el evento) y e.which (los key código, para saber cuál key se presionó) son precisas. En Javascript simple, es un poco más difícil de saber a menos que haga todo lo que la biblioteca jQuery hace internamente.
Tenga en cuenta que hay un keydown evento, que es diferente a keypress. Puede obtener más información sobre ellos aquí: onKeyPress Vs. onKeyUp y onKeyDown
En cuanto a sugerir qué usar, definitivamente sugeriría usar jQuery si está preparado para aprender el marco. Al mismo tiempo, diría que debe aprender la sintaxis, los métodos, las características de Javascript y cómo interactuar con el DOM. Una vez que comprenda cómo funciona y qué está sucediendo, debería sentirse más cómodo trabajando con jQuery. Para mí, jQuery hace que las cosas sean más consistentes y más concisas. Al final, es Javascript y envuelve el idioma.
Otro ejemplo de jQuery es muy útil con AJAX. Los navegadores son inconsistentes con la forma en que se manejan las solicitudes AJAX, por lo que jQuery lo abstrae para que no tenga que preocuparse.
Aquí hay algo que podría ayudar a decidir:
- http://www.jscripters.com/jquery-disadvantages-and-advantages/
PULSAR TECLAS (ingresar key)
Haga clic dentro del fragmento y presione Entrar key.
Vainilla
document.addEventListener("keypress", function(event)
if (event.keyCode == 13)
alert('hi.');
);Taquigrafía de vainilla (ES6)
this.addEventListener('keypress', event =>
if (event.keyCode == 13)
alert('hi.')
)jQuery
$(this).on('keypress', function(event)
if (event.keyCode == 13)
alert('hi.')
)jQuery clásico
$(this).keypress(function(event)
if (event.keyCode == 13)
alert('hi.')
)jQuery taquigrafía (ES6)
$(this).keypress((e) =>
if (e.keyCode == 13)
alert('hi.')
)Aun mas corto (ES6)
$(this).keypress(e=>
e.which==13?
alert`hi.`:null
)Debido a algunas solicitudes, aquí una explicación:
Reescribí esta respuesta ya que las cosas se han vuelto obsoletas con el tiempo, así que la actualicé.
solía this para enfocarse en el alcance de la ventana dentro de los resultados cuando el documento está listo y en aras de la brevedad, pero no es necesario.
Obsoleto:
los .which y .keyCode Los métodos en realidad se consideran obsoletos, por lo que recomendaría .code pero personalmente sigo usando keyCode ya que el rendimiento es mucho más rápido y solo eso cuenta para mí. La versión clásica de jQuery .keypress() no está oficialmente desaprobado como dicen algunas personas, pero ya no son preferidos como .on('keypress') ya que tiene mucha más funcionalidad (estado en vivo, múltiples manejadores, etc.). los 'keypress' El evento en la versión Vanilla también está obsoleto. La gente debería preferir antes de la entrada o el teclado hoy. (Nota: no tiene nada que ver con los eventos de jQuery, se llaman igual pero se ejecutan de manera diferente).
Todos los ejemplos anteriores no son un gran problema con respecto a obsoletos o no. Las consolas o cualquier navegador deberían poder notificarle con eso si esto sucede. Y si esto sucede en el futuro, simplemente arréglelo.
Legibilidad:
A pesar de la facilidad de hacerlo demasiado corto y directo, tampoco siempre es bueno. Si trabaja en equipo, su código debe ser legible y detallado. Recomiendo la versión de jQuery .on('keypress'), este es el camino a seguir y es comprensible para la mayoría de las personas.
Rendimiento:
Siempre sigo mi frase Desempeño sobre efectividad como cualquier cosa puede ser más efectiva si existe la opción, pero debería funcionar y ejecutar solo lo que quiero, cuanto más rápido, mejor. Es por eso que prefiero .keyCode incluso si se considera obsoleto (en la mayoría de los casos). Sin embargo, todo depende de ti.
Prueba de rendimiento
Usar event.key y JS moderno!
Sin códigos numéricos ya no. Puedes usar "Enter", "ArrowLeft", "r", o cualquier key nombre directamente, lo que hace que su código sea mucho más legible.
NOTA: Las antiguas alternativas (
.keyCodey.which) están en desuso.
document.addEventListener("keypress", function onEvent(event)
if (event.key === "ArrowLeft")
// Move Left
else if (event.key === "Enter")
// Open Menu...
);
Documentos de Mozilla
Navegadores compatibles