JavaScript >> Javascript 文檔 >  >> Tags >> web

快速提示:將鍵盤快捷鍵添加到您的 Web 應用程序

我們的高級用戶喜歡我們的鍵盤快捷鍵。我們在任何地方都使用它們——在我們的代碼編輯器中,在 Photoshop 中,在 gmail 中。當我們在網絡應用程序中按 Ctrl+S 時,我們討厭它,只是看到我們的瀏覽器提供下載它。向您的應用程序添加快捷方式一點也不難。在這個快速提示中,我們將通過使用 Mousetrap.js 向您展示如何做到這一點。

1。單鍵

單鍵很容易。您可以使用一個簡單的事件偵聽器來完成文檔對像上的按鍵操作。但是有了捕鼠器,效果就更好了。

// 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。替代符號

Mousetrap 在聆聽更複雜的組合鍵(如大寫字母和特殊符號)時會發光。

// 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。組合鍵

涉及 Control 鍵的組合同樣簡單(請參閱下一個示例,了解如何同時監聽 Control 和 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。多種組合

傳遞數組而不是字符串可以讓您一次監聽多個組合鍵。當您必須偵聽涉及 Control(適用於 Windows 和 Linux)和 Command(適用於 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。序列

這種類型的快捷方式非常強大,用於 gmail 等應用程序。也適用於數組鍵!

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

結論

這是我們關於鍵盤快捷鍵的快速提示。如果您以前使用過鍵盤熱鍵,或者有足夠的勇氣在您的下一個項目中嘗試使用它們,請在下面的評論中與我們分享結果。


Tutorial JavaScript 教程
  1. 在 Solid 和 Vite 中安裝 Tailwind CSS

  2. 在 Vue JS 中使用進度條渲染列表。

  3. Bootstrap 5 放棄對 IE 10 和 11 瀏覽器的支持:這會給我們帶來什麼影響?

  4. 不同編程語言的 For 循環

  5. Node.js 最佳實踐

  6. JavaScript 擴展 |關鍵詞

  7. 12 月 5 日星期四加入我們,參加 Bitovi 的在線聚會

  1. 使用 React 和 Express 接受 Stripe 付款

  2. 代碼反饋

  3. Flutter 2.5 的新功能

  4. 如何在 React 中將組件作為道具傳遞

  5. 帶有 HTML 畫布的 Ray Casting 地板

  6. 從 Google Docs 中獲取選擇

  7. Next.js 通過 Prisma 將數據發佈到 Postgres

  1. 使用 NATS 流的微服務數據流 - 第 1 部分

  2. 使用 Axios 登錄 Vue

  3. 帶有 React 錯誤邊界和後備組件的用戶友好錯誤

  4. 帶有 setInterval 的 JavaScript 循環計時器