web-dev-qa-db-fra.com

Comment créer un raccourci clavier pour un bouton de saisie

Je montre un tas d'images et chaque image a sa propre page HTML. J'ai un bouton de saisie qui permet de cliquer sur le lien suivant pour afficher la photo. Cependant, je veux pouvoir utiliser les flèches de mon clavier pour avancer et reculer. Je suis novice en codage et je ne sais pas si cela est possible. Puis-je faire cela avec HTML en utilisant la clé d'accès:

<input type="button" accesskey="?" value="Next Item">

Ou dois-je utiliser un plugin JQuery? Si oui, lequel?

jqueryhtmlbuttonkeyboard-shortcuts
33
Ryan Bennett

Comme zzzzBov , le code HTML accesskeydéfinit une clé qui ne sera interceptée que si elle est combinée avec le ALT clé. C'est pourquoi c'est pas utile pour piéger une clé seule.

Mais vous devez faire particulièrement attention à choisir l'événement pour intercepter les touches du curseur car Webkit a décidé de ne pas les intercepter avec l'événement keypresscar il ne figure pas dans la norme . À ce moment, les 3 autres réponses ici utilisent cet événement keypresset c’est pourquoi elles ne fonctionnent pas dans Google Chrome ni Safari, mais si vous le changez en keydownname__, elles fonctionneront sur tous les navigateurs.

Vous pouvez utiliser ce code jQuery pour capturer l’événement keydownde la left, right, up, et down Touches directionnelles:

$(window).keydown(function(e) {
  switch (e.keyCode) {
    case 37: // left arrow key
    case 38: // up arrow key
      e.preventDefault(); // avoid browser scrolling due to pressed key
      // TODO: go to previous image
      return;
    case 39: // right arrow key
    case 40: // up arrow key
      e.preventDefault();
      // TODO: go to next image
      return;
  }
});

Et dans ce qui suit ​​ extrait de code , vous pouvez voir et exécuter un exemple complet dans lequel les images sont échangées à l'aide des touches ou des boutons.

var currentImage = 0;
var imagesArray = [
  'https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/150px-Tux.svg.png',
  'https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/150px-Wikipedia-logo-v2.svg.png',
  'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Git-logo.svg/150px-Git-logo.svg.png'
];

function hasPrev() {
  return currentImage > 0;
}

function hasNext() {
  return currentImage < imagesArray.length - 1;
}

function goToPrev(e) {
  e.preventDefault();
  if (!hasPrev())
    return;
  currentImage -= 1;
  updateScreen();
}

function goToNext(e) {
  e.preventDefault();
  if (!hasNext())
    return;
  currentImage += 1;
  updateScreen();
}

function updateScreen() {
  $('#imgMain').attr('src', imagesArray[currentImage]);
  $('#btnPrev').prop('disabled', !hasPrev());
  $('#btnNext').prop('disabled', !hasNext());
}

$(document).ready(function() {
  updateScreen();
  $('#btnPrev').click(goToPrev);
  $('#btnNext').click(goToNext);
});

var keyCodes = {
  left: 37,
  up: 38,
  right: 39,
  down: 40
};

$(window).keydown(function(e) {
  switch (e.keyCode) {
    case keyCodes.left:
    case keyCodes.up:
      goToPrev(e);
      return;
    case keyCodes.right:
    case keyCodes.down:
      goToNext(e);
      return;
  }
});
button:enabled kbd {
  color: green;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnPrev">
  Previous Image
  <br/>
  <small>(arrow keys: <kbd>left</kbd> or <kbd>up</kbd>)</small>
</button>
<button id="btnNext">
  Next Image
  <br/>
  <small>(arrow keys: <kbd>right</kbd> or <kbd>down</kbd>)</small>
</button>
<br/>
<img id="imgMain" src="">

MISE À JOUR (mai 2016)

keyCode a récemment été déconseillé (mais je n'ai pas encore trouvé de solution multi-navigateurs). Citant article MDN pour keyCode :

Obsolète

Cette fonctionnalité a été supprimée des standards Web. Bien que certains navigateurs puissent encore le prendre en charge, il est en train d'être supprimé. Ne l'utilisez pas dans des projets anciens ou nouveaux. Les pages ou les applications Web qui l'utilisent peuvent se rompre à tout moment.

...

Cela ne devrait pas être utilisé par les nouvelles applications Web. IE et Firefox prennent déjà (partiellement) en charge KeyboardEvent.key. En outre, Google Chrome et Safari prennent en charge KeyboardEvent.keyIdentifier, qui est défini dans l'ancien brouillon de DOM Level 3 Events. Si vous pouvez les utiliser ou l’un d’eux, vous devriez les utiliser le plus possible.

33
Mariano Desanze

Je viens d'utiliser un tiers shortcut.js . C'est très sympa. Vous pouvez référencer it. 

<script type="text/javascript" src="js/shortcut.js"></script>

<script>
    shortcut.add("alt+s", function() {
        // Do something
    });   
    shortcut.add("ctrl+enter", function() {
        // Do something
    }); 
</script>
24
babygreat

Retour au point HTML avec l'utilisation de l'ordinateur portable:

Non, accesskey è usato insieme aalt

Così farà accesskey="a"Alt+Aessere la scorciatoia.

O devo utiliser un plugin jQuery?

Non, puoi usare il vecchio javascript normale; Anche jQuery funziona.

$(window).keypress(function(e){
  var code = e.which || e.keyCode;
  switch ( code )
  {
    case 43:
      //do stuff
      return false;
    default:
      break;
  }
});
9
zzzzBov

J'ai utilisé l'exemple dans jsFiddle il utilise les touches fléchées vers le haut et le bas pour se concentrer sur le contrôle d'entrée suivant ou précédent, respectivement. Regarde

2
Milan Jaric

Je vais utiliser ceci:

<input type="button" accesskey="n" value="Next Item">

Et l'utilisateur doit taper: shift + alt + n

2
PutihTua

Tu pourrais faire ça ...

$(window).keypress(function(event) {
    switch (event.keyCode) {

    case 37:
        prev();
        break;
    case 39:
        next();
        break;

    }
});

jsFiddle .

0
alex