logo

Rychlý tip:Přidejte do své webové aplikace klávesové zkratky

My zkušení uživatelé milujeme naše klávesové zkratky. Používáme je všude – v našem editoru kódu, ve Photoshopu, v gmailu. A nenávidíme, když stiskneme Ctrl+S ve webové aplikaci, jen abychom viděli, že náš prohlížeč nabízí její stažení. Přidání zástupců do vaší aplikace není vůbec těžké. V tomto rychlém tipu vám ukážeme, jak to udělat, pomocí Mousetrap.js.

1. Jednotlivé klávesy

Jednoduché klíče jsou jednoduché. Můžete to udělat pomocí jednoduchého posluchače událostí pro stisknutí klávesy na objektu dokumentu. Ale s pastí na myši je to ještě lepší.

// 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. Alternativní symboly

Past na myši svítí při poslechu složitějších kombinací kláves, jako jsou velká písmena a speciální symboly.

// 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. Kombinace kláves

Kombinace, které zahrnují klávesu Control, jsou stejně snadné (viz další příklad, jak poslouchat klávesu Control i klávesu OS X Command).

// 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. Více kombinací

Předání pole místo řetězce vám umožní poslouchat více kombinací kláves najednou. To je užitečné, když musíte poslouchat kombinace, které zahrnují klávesy Control (pro Windows a Linux) a Command (pro 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. Sekvence

Tento typ zkratek je velmi výkonný a používá se v aplikacích, jako je gmail. Funguje také s klíči pole!

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

Závěr

Toto byl náš rychlý tip na klávesové zkratky. Pokud jste již dříve používali klávesové zkratky nebo máte dost odvahy experimentovat s nimi ve svém dalším projektu, podělte se s námi o výsledky v komentářích níže.