logo

Sugerencia rápida:agregue atajos de teclado a su aplicación web

A los usuarios avanzados nos encantan nuestros atajos de teclado. Los usamos en todas partes:en nuestro editor de código, en Photoshop, en Gmail. Y odiamos cuando presionamos Ctrl+S en una aplicación web, solo para ver que nuestro navegador ofrece descargarla. Agregar accesos directos a su aplicación no es nada difícil. En este consejo rápido, le mostraremos cómo hacerlo usando Mousetrap.js.

1. Teclas individuales

Las teclas individuales son fáciles. Puede hacerlo con un detector de eventos simple para presionar una tecla en el objeto del documento. Pero con Mousetrap, es aún mejor.

// This is the standard Mousetrap.js syntax.
// The parameters are the symbol we expect and a callback function.
Mousetrap.bind('7', function() { console.log('7'); showBalloon(7); });
Mousetrap.bind('/', function() { console.log('/'); showBalloon('/'); }, 'keyup');
Mousetrap.bind('esc', function() { console.log('escape'); showBalloon('Escape'); }, 'keyup');

// The code below is for our demo.
// Displays a balloon with info on every successful button press. 
var balloon = $('.keyboard-answer'),
    stopTimeout;

$(document).click(function(){
  if(balloon.is(':visible')) {
    balloon.removeClass('active');
  }
});

function showBalloon(data) {
  balloon.addClass('active').find('h3 span').text(data);

  clearTimeout(stopTimeout);
  stopTimeout = setTimeout(function () {
    balloon.removeClass('active');
  }, 1500);
}

<div class="content">

    <ul>
      <li>Try pressing <a class="button c55"><span class="key">7</span></a></li>
      <li>Or you can try hitting <a class="button c191"><span class="key">/</span></a></li>
      <li>Even special keys work <a class="button c27 fn esc"><span class="key">esc</span></a></li>
    </ul>

    <div class="keyboard-answer">
      <h3>You pressed <span></span></h3>
    </div>  

</div>

2. Símbolos alternativos

Mousetrap brilla al escuchar combinaciones de teclas más complejas como letras mayúsculas y símbolos especiales.

// Mousetrap.js can listen for symbols and not actual keys presses,
// so any alternative symbol can be bound (the ones reached by pressing shift + key)
Mousetrap.bind('@', function() { console.log('@'); showBalloon('@'); });
Mousetrap.bind('M', function() { console.log('M'); showBalloon('M'); });
Mousetrap.bind('>', function() { console.log('>'); showBalloon('>'); });

// The code below is for our demo.
// Displays a balloon with info on every successful button press. 
var balloon = $('.keyboard-answer'),
    stopTimeout;

$(document).click(function(){
  if(balloon.is(':visible')) {
    balloon.removeClass('active');
  }
});

function showBalloon(data) {
  balloon.addClass('active').find('h3 span').text(data);

  clearTimeout(stopTimeout);
  stopTimeout = setTimeout(function () {
    balloon.removeClass('active');
  }, 1500);
}

<div class="content">

    <ul>
      <li>You can type in symbols like <a class="button c50"><span class="key">@</span></a></li>
      <li>Also capital letters<a class="button c77"><span class="key">m</span></a></li>
      <li>And any other alternative character<a class="button c190"><span class="key">&gt;</span></a></li>
    </ul>

    <div class="keyboard-answer">
      <h3>You pressed <span></span></h3>
    </div>  

</div>

3. Combinaciones de teclas

Las combinaciones que involucran la tecla Control son igualmente fáciles (consulte el siguiente ejemplo sobre cómo escuchar tanto la tecla Control como la tecla Comando de OS X).

// To bind button combos, use '+' to request as many keys as you want.
// This way, all the keys have to be pressed at once.
Mousetrap.bind('ctrl+s', function(){ console.log('save'); showBalloon('Ctrl + S'); return false; });
// Returning false works just like e.preventDefault() and stops the usual functionality of the hotkeys.
Mousetrap.bind('ctrl+z', function(){ console.log('undo'); showBalloon('Ctrl + Z'); return false; });
Mousetrap.bind('ctrl+shift+z', function(){ console.log('redo'); showBalloon('Ctrl + Shift + Z'); return false; });

// The code below is for our demo.
// Displays a balloon with info on every successful button press. 
var balloon = $('.keyboard-answer'),
    stopTimeout;

$(document).click(function(){
  if(balloon.is(':visible')) {
    balloon.removeClass('active');
  }
});

function showBalloon(data) {
  balloon.addClass('active').find('h3 span').text(data);

  clearTimeout(stopTimeout);
  stopTimeout = setTimeout(function () {
    balloon.removeClass('active');
  }, 1500);
}

<div class="content">

    <ul>
      <li>
        Try hitting the <strong>Save</strong> hotkeys <a class="button c17 control"><span class="key">control</span></a> +
        <a class="button c83"><span class="key">s</span></a>
      </li>
      <li>
        The <strong>Undo</strong> command <a class="button c17 control"><span class="key">control</span></a> +
        <a class="button c90"><span class="key">z</span></a>
      </li>
      <li>
        Or the <strong>Redo</strong> command <a class="button c17 control"><span class="key">control</span></a> +
        <a class="button c16 shiftleft"><span class="key">Shift</span></a> +
        <a class="button c90"><span class="key">z</span></a>
      </li>
    </ul>

    <div class="keyboard-answer">
      <h3>You pressed <span></span></h3>
    </div>  

</div>

4. Múltiples Combinaciones

Pasar una matriz en lugar de una cadena le permite escuchar varias combinaciones de teclas a la vez. Esto es útil cuando tiene que escuchar combinaciones que involucran las teclas Control (para Windows y Linux) y Comando (para Mac).

// By listing different combinations with a comma
// you can set the same function to be called on different bindings.
Mousetrap.bind(['command+k', 'ctrl+k'], function() {
  console.log('command + k or control + k');
  showBalloon('Command + K or Control + K');
});

// The code below is for our demo.
// Displays a balloon with info on every successful button press. 
var balloon = $('.keyboard-answer'),
    stopTimeout;

$(document).click(function(){
  if(balloon.is(':visible')) {
    balloon.removeClass('active');
  }
});

function showBalloon(data) {
  balloon.addClass('active').find('h3 span').text(data);

  clearTimeout(stopTimeout);
  stopTimeout = setTimeout(function () {
    balloon.removeClass('active');
  }, 1500);
}

<div class="content">

    <ul>
      <li>Two different key combinations
        <a class="button command commandleft"><span class="key">command</span></a> +
        <a class="button c75"><span class="key">k</span></a>
      </li>
      <li>Can have the same functionality
        <a class="button c17 control"><span class="key">control</span></a> +
        <a class="button c75"><span class="key">k</span></a>
      </li>
    </ul>

    <div class="keyboard-answer">
      <h3>You pressed <span></span></h3>
    </div>  

</div>

5. Secuencias

Este tipo de atajos son muy poderosos y se usan en aplicaciones como gmail. ¡También funciona con claves de matriz!

// Listing different symbols and keys with just an empty space between them
// will cause Moustrap.js to bind them as a sequence.
// This way they have to be pressed one after another in this specific order.
Mousetrap.bind('g i', function() { console.log('go to inbox'); showBalloon('Go To Inbox Command'); });
Mousetrap.bind('up left down left down down right right enter', function() {
  console.log('konami code');
  showBalloon('Konami Code');
});

// The code below is for our demo.
// Displays a balloon with info on every successful button press. 
var balloon = $('.keyboard-answer'),
    stopTimeout;

$(document).click(function(){
  if(balloon.is(':visible')) {
    balloon.removeClass('active');
  }
});

function showBalloon(data) {
  balloon.addClass('active').find('h3 span').text(data);

  clearTimeout(stopTimeout);
  stopTimeout = setTimeout(function () {
    balloon.removeClass('active');
  }, 1500);
}

<div class="content">

    <ul>
      <li>Press keys one after another <a class="button c71"><span class="key">g</span></a><a class="button c73"><span class="key">i</span></a></li>
      <li>Perfect for easter eggs
        <a class="button c38 arrows"><span class="key">⬆</span></a>
        <a class="button c37 arrows"><span class="key">⬅</span></a>
        <a class="button c38 arrows"><span class="key">⬇</span></a>
        <a class="button c37 arrows"><span class="key">⬅</span></a>
        <a class="button c40 arrows"><span class="key">⬇</span></a>
        <a class="button c40 arrows"><span class="key">⬇</span></a>
        <a class="button c39 arrows"><span class="key">➡</span></a>
        <a class="button c39 arrows"><span class="key">➡</span></a>
        <a class="button c13 alt enter"><span class="key">enter</span></a>
      </li>

    </ul>

    <div class="keyboard-answer">
      <h3>You entered the <span></span></h3>
    </div>  

</div>

Conclusión

Este fue nuestro consejo rápido sobre atajos de teclado. Si ha usado teclas de acceso rápido del teclado antes, o es lo suficientemente valiente como para experimentar con ellas en su próximo proyecto, comparta los resultados con nosotros en los comentarios a continuación.