jquery - teclas - Cómo crear un atajo de teclado para un botón de entrada

teclas de atajo para word

Question

Estoy mostrando un montón de imágenes y cada imagen tiene su propia página HTML. Tengo un botón de entrada que con un clic lo llevará al siguiente enlace de la imagen. Sin embargo, quiero poder usar las flechas del teclado para avanzar y retroceder. Soy nuevo en la codificación y no sé si esto es posible. ¿Puedo hacer esto con HTML usando la clave de acceso?

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

¿O necesito usar un plugin JQuery? ¿Si es así, Cuál?

Answer 1

¿Puedo hacer esto con HTML usando la clave de acceso?

No, accesskey se usa junto con alt

Así que accesskey="a" hará que Alt + A sea ​​el atajo.

¿O necesito usar un plugin jQuery?

No, puedes usar javascript antiguo normal; jQuery también funciona.

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

Answer 2

Acabo de utilizar un tercero shortcut.js . Es muy amigable. Puedes reference

<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

Como explicó zzzzBov , la clave de accesskey HTML define una clave que quedará atrapada solo cuando se combina con la tecla ALT . Es por eso que no es útil para atrapar ninguna tecla sola .

Pero debe tener especial cuidado en elegir el evento para atrapar las teclas del cursor porque Webkit ha decidido no atraparlas con el evento de keypress , ya que no está en el estándar . En este momento, las otras 3 respuestas aquí usan este evento de keypress y es por eso que no funcionan en Google Chrome ni Safari , pero si cambias eso a keydown funcionarán en todos los navegadores.

Puede usar este código jQuery para capturar el evento de selección de las teclas de flecha izquierda , derecha , arriba y abajo :

$(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;
  }
});

Y en el siguiente fragmento de código puede ver y ejecutar un ejemplo completo en el que las imágenes se intercambian usando las teclas o los botones.

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

ACTUALIZACIÓN (mayo de 2016)

keyCode ha quedado obsoleto recientemente (pero aún no he encontrado una solución de navegador múltiple ). Citando el artículo de MDN para keyCode :

Obsoleto

Esta característica ha sido eliminada de los estándares web. Aunque algunos navegadores aún pueden soportarlo, está en proceso de descarte. No lo use en proyectos antiguos o nuevos. Las páginas o aplicaciones web que lo usan pueden romperse en cualquier momento.

...

Esto no debe ser usado por nuevas aplicaciones web. IE y Firefox ya (parcialmente) admiten KeyboardEvent.key. Además, Google Chrome y Safari son compatibles con KeyboardEvent.keyIdentifier, que se define en el borrador anterior de los eventos DOM Level 3. Si puede usarlos o uno de ellos, debe usarlos lo más posible.

Answer 4

Hice un ejemplo en jsFiddle que usa la tecla de flecha arriba y abajo para enfocar el control de entrada siguiente o anterior, respectivamente. Echar un vistazo

Answer 5

Podrías hacer esto ...

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

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

    }
});

jsFiddle .

Answer 6

Usaré esto:

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

Y el usuario debe escribir: shift + alt + n