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

Question

Je présente un ensemble d'images et chaque image a sa propre page HTML. J'ai un bouton de saisie qui, s'il est cliqué, vous amènera au lien suivant pour l'image. Cependant, je voudrais pouvoir utiliser les flèches de mon clavier pour avancer et reculer. Je suis novice en matière de codage et je ne sais pas si cela est possible. Puis-je le faire avec HTML en utilisant la touche d'accès :

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

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

Answer 1

Comme zzzzBov expliqué, le HTML accesskey définit une clé qui ne sera piégée que lorsqu'elle sera combinée avec l'option ALT clé. C'est pourquoi c'est pas utile pour piéger une clé seule .

Mais vous devez prendre un soin particulier à choisir l'événement pour piéger les touches de curseur car Webkit a décidé de ne pas les piéger avec la fonction keypress car il ne fait pas partie de la norme . Pour l'instant, les 3 autres réponses ici utilisent ceci keypress et c'est pourquoi ils ne fonctionnent pas dans Google Chrome ni dans Safari mais si vous changez cela en keydown ils fonctionneront sur tous les navigateurs.

Vous pouvez utiliser ce code jQuery pour capturer l'adresse de l'utilisateur. keydown de l'événement left , right , up et down les touches fléchées :

$(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 les éléments suivants extrait de code vous pouvez voir et exécuter un exemple complet dans lequel les images sont échangées en utilisant les touches ou les 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: left or up)</small>
</button>
<button id="btnNext">
  Next Image
  <br/>
  <small>(arrow keys: right or down)</small>
</button>
<br/>
<img id="imgMain" src="">

MISE À JOUR (mai 2016)

keyCode a récemment été déprécié (mais je n'ai pas encore trouvé de solution inter-navigateurs). Citation : Article MDN pour keyCode :

Déprécié

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

...

Cela ne devrait pas être utilisé par les nouvelles applications web. IE et Firefox supportent déjà (partiellement) KeyboardEvent.key. De plus, Google Chrome et Safari supportent KeyboardEvent.keyIdentifier qui est défini dans l'ancien projet de DOM Level 3 Events. Si vous pouvez les utiliser ou l'un d'entre eux, vous devriez l'utiliser autant que possible.

Answer 2

J'ai juste utilisé une tierce partie shortcut.js . C'est très convivial. Vous pouvez référence il.

<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>

Answer 3

Puis-je faire cela avec HTML en utilisant la clé d'accès :

Non, la clé d'accès est utilisée en conjonction avec alt

Alors accesskey="a" fera Alt + A être le raccourci.

Ou dois-je utiliser un plugin jQuery ?

Non, vous pouvez utiliser le bon vieux javascript ; jQuery fonctionne aussi.

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

Answer 4

J'ai fait l'exemple dans jsFiddle il utilise la touche flèche vers le haut et vers le bas pour se concentrer sur le contrôle d'entrée suivant ou précédent respectivement. Jetez un coup d'oeil

Answer 5

Je vais l'utiliser :

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

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