Quel code d'accès pour la clé escape avec jQuery
j'ai deux fonctions. Quand enter est pressé, les fonctions fonctionnent correctement, mais quand escape est pressé, ce n'est pas le cas. Quel est le bon numéro pour la clé de secours?
$(document).keypress(function(e) {
if (e.which == 13) $('.save').click(); // enter (works as expected)
if (e.which == 27) $('.cancel').click(); // esc (does not work)
});
15 réponses
Essayer avec le événement keyup :
$(document).keyup(function(e) {
if (e.keyCode === 13) $('.save').click(); // enter
if (e.keyCode === 27) $('.cancel').click(); // esc
});
plutôt que de codifier les valeurs du code dans votre fonction, envisagez d'utiliser les constantes nommées pour mieux transmettre votre Signification:
var KEYCODE_ENTER = 13;
var KEYCODE_ESC = 27;
$(document).keyup(function(e) {
if (e.keyCode == KEYCODE_ENTER) $('.save').click();
if (e.keyCode == KEYCODE_ESC) $('.cancel').click();
});
certains navigateurs (comme FireFox, incertain des autres) définissent un objet global KeyEvent
qui expose ces types de constantes pour vous. Cela DONC, la question montre une belle façon de définir l'objet dans d'autres navigateurs aussi bien.
(réponse extraite de mon commentaire précédent )
, Vous devez utiliser keyup
plutôt que keypress
. par exemple:
$(document).keyup(function(e) {
if (e.which == 13) $('.save').click(); // enter
if (e.which == 27) $('.cancel').click(); // esc
});
keypress
ne semble pas être traité de façon uniforme entre les navigateurs (essayer la démo à http://api.jquery.com/keypress in IE vs Chrome vs Firefox. Parfois keypress
ne s'enregistre pas, et les valeurs pour "which" et "keyCode" varient) alors que keyup
est cohérent.
Puisqu'il y a eu une certaine discussion de e.which
vs e.keyCode
: notez que e.which
est la valeur normalisée jquery et est celle recommandée pour l'utilisation:
l'événement.quelle propriété normalise l'événement.mot de code et de l'événement.charCode. Il est recommandé de regarder de l'événement.qui pour l'entrée de la touche de clavier.
pour trouver le code pour n'importe quelle clé, utilisez cette fonction simple:
document.onkeydown = function(evt) {
console.log(evt.keyCode);
}
essayer le jEscape plugin ( télécharger de google drive )
$(document).escape(function() {
alert('ESC button pressed');
});
ou obtenir le code de clé pour le navigateur croisé
var code = (e.keyCode ? e.keyCode : e.which);
if (code === 27) alert('ESC');
if (code === 13) alert('ENTER');
peut - être Pouvez-vous utiliser switch
var code = (e.keyCode ? e.keyCode : e.which);
switch (code) {
case 27:
alert('ESC');
break;
case 13:
alert('ENTER');
break;
}
votre meilleur pari est
$(document).keyup(function(e) {
if (e.which === 13) $('.save').click(); // enter
if (e.which === 27) $('.cancel').click(); // esc
/* OPTIONAL: Only if you want other elements to ignore event */
e.preventDefault();
e.stopPropagation();
});
résumé
-
which
est plus préférable quekeyCode
parce qu'il est normalisé -
keyup
est plus préférable quekeydown
parce que keydown peut se produire plusieurs fois si l'utilisateur garde appuyé. - N'utilisez pas
keypress
sauf si vous voulez capturer des caractères réels.
il est intéressant de noter que Bootstrap utilise keydown et keyCode dans sa composante dropdown (en date du 3.0.2)! Je pense que c'est probablement mauvais choix.
extrait connexe de JQuery doc
alors que les navigateurs utilisent différents propriétés pour stocker cette information, jQuery normalise le .qui propriété de sorte que vous pouvez l'utiliser de façon fiable pour récupérer le code clé. Ce code correspond à une touche du clavier, y compris les codes spéciaux des clés comme des flèches. Pour attraper l'entrée de texte réelle,.keypress() peut être un meilleur choix.
autre sujet d'intérêt: bibliothèque JavaScript
pour obtenir le code hexadécimal pour tous les caractères: http://asciitable.com/
votre code fonctionne très bien. C'est probablement la fenêtre qui n'est pas concentré. J'utilise une fonction similaire pour fermer les boîtes iframe, etc.
$(document).ready(function(){
// Set focus
setTimeout('window.focus()',1000);
});
$(document).keypress(function(e) {
// Enable esc
if (e.keyCode == 27) {
parent.document.getElementById('iframediv').style.display='none';
parent.document.getElementById('iframe').src='/views/view.empty.black.html';
}
});
j'essayais de faire la même chose et ça m'énervait. Dans firefox, il semble que si vous essayez de faire certaines choses quand la touche escape est pressée, il continue à traiter la touche escape qui annule alors ce que vous essayiez de faire. Alerte fonctionne très bien. Mais dans mon cas, je voulais revenir en arrière dans l'histoire qui n'a pas fonctionné. Finalement compris que j'ai dû forcer la propagation de l'événement pour arrêter comme indiqué ci-dessous...
if (keyCode == 27)
{
history.back();
if (window.event)
{
// IE works fine anyways so this isn't really needed
e.cancelBubble = true;
e.returnValue = false;
}
else if (e.stopPropagation)
{
// In firefox, this is what keeps the escape key from canceling the history.back()
e.stopPropagation();
e.preventDefault();
}
return (false);
}
pour expliquer où les autres réponses n'ont pas; le problème est votre utilisation de keypress
.
peut-être que l'événement est simplement mal nommé, mais keypress
est défini à feu quand when an actual
character
is being inserted
. I. e. texte.
Alors que ce que vous voulez est keydown
/ keyup
, qui tire à chaque fois (avant ou après, respectivement) the user depresses a
key
. I. e. ces choses sur clavier.
la différence apparaît ici parce que esc
est un caractère de contrôle (littéralement" caractère de non-impression") et donc n'écrit aucun texte, donc même pas de tir keypress
.
enter
est bizarre, parce que même si vous l'utilisez comme un caractère de contrôle (i.e. pour contrôler L'UI), il est encore en train d'insérer un caractère de nouvelle ligne, qui va lancer keypress
.
Source: quirksmode
j'ai toujours utilisé keyup et E. pour attraper la clé de secours.
je sais que cette question est posée à propos de jquery, mais pour ceux qui utilisent jqueryui, il y a des constantes pour beaucoup de keycodes:
$.ui.keyCode.ESCAPE
une bibliothèque Javascript robuste pour capturer les entrées de clavier et les combinaisons de touches saisies. Il n'a pas de dépendances.
http://jaywcjlove.github.io/hotkeys /
hotkeys('enter,esc', function(event,handler){
switch(handler.key){
case "enter":$('.save').click();break;
case "esc":$('.cancel').click();break;
}
});
raccourcis clavier comprend les modificateurs suivants: ⇧ , shift option ⌥ alt ctrl contrôle commande , et ⌘ .
Les touches peuvent être utilisées pour les raccourcis: backspace onglet , clair , entrée , retour , esc , escape , espace , , vers le bas , de gauche , droit , maison , fin , pageup , pagedown , del , supprimer et f1 par f19 .
vient d'afficher une réponse à jour que e.keyCode
est considéré comme déprécié sur MDN .
vous devriez plutôt opter pour e.key
à la place qui soutient des noms propres pour tout. Voici la copie pertinente pasta
window.addEventListener("keydown", function (event) {
if (event.defaultPrevented) {
return; // Do nothing if the event was already processed
}
switch (event.key) {
case "ArrowDown":
// Do something for "down arrow" key press.
break;
case "ArrowUp":
// Do something for "up arrow" key press.
break;
case "ArrowLeft":
// Do something for "left arrow" key press.
break;
case "ArrowRight":
// Do something for "right arrow" key press.
break;
case "Enter":
// Do something for "enter" or "return" key press.
break;
case "Escape":
// Do something for "esc" key press.
break;
default:
return; // Quit when this doesn't handle the key event.
}
// Cancel the default action to avoid it being handled twice
event.preventDefault();
}, true);