當我嘗試在我的網站上構建鍵盤快捷鍵時，為什么jQuery keyup無效？

Question

我正在嘗試在我的網站上構建可訪問性的鍵盤快捷鍵。 例如，當用戶按下“1”時，我想將他移到家中。 當用戶按下'2'時，到另一頁面。

我正在嘗試使用keyup，但它不起作用。

$(function() {
  $(document).keyup(function(e) {
    if (e.which == 1) {
      console.log('1');
      window.location.href = '/';
    } else if (e.which == 2) {
      window.location.href = '/escolas';
    } else if (e.which == 3) {
      window.location.href = '/noticias';
    } else if (e.which == 4) {
      window.location.href = '/eventos';
    } else if (e.which == 5) {
      window.location.href = '/contato';
    }
  });
});

有人能幫我嗎？ 當我按'1'時，它不記錄1。

Answer 1

這是因為'1'的關鍵代碼不是1而是49（或者是小鍵盤上的那個）。

選中此項以查看密鑰代碼：

 $(function() { $(document).keyup(function(e) { $('body').text(e.type + ' ' + e.which); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 2

您使用了錯誤的密鑰代碼。 請參閱此

 $(function() { $(document).keyup(function(e) { if (e.which == 49) { console.log('1'); window.location.href = '/'; } else if (e.which == 50) { window.location.href = '/escolas'; } else if (e.which == 51) { window.location.href = '/noticias'; } else if (e.which == 52) { window.location.href = '/eventos'; } else if (e.which == 53) { window.location.href = '/contato'; } }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 3

您可以通過String.fromCharCode(event.which);獲取關鍵字符String.fromCharCode(event.which); ，然后直接與實際角色進行比較：

 $(function() {
      $(document).keyup(function(e) {
        if (e.key) {
           var key = e.key;
         } else { 
           var key  = String.fromCharCode(e.which || e.keyCode);
         }
        if (key == 1) {
          console.log('1');
          window.location.href = '/';
        } else if (key == 2) {
          window.location.href = '/escolas';
        } else if (key == 3) {
          window.location.href = '/noticias';
        } else if (key == 4) {
          window.location.href = '/eventos';
        } else if (key == 5) {
          window.location.href = '/contato';
        }
      });
    });

Answer 4

e.which給你ASCII值。 要將ASCII轉換為字符，請使用String.fromCharCode（e.which） 。

$(function () {
    $(document).keyup(function (e) {            
        if (String.fromCharCode(e.which) == 1) {
            window.location.href = '/';
        } else if (String.fromCharCode(e.which) == 2) {
            window.location.href = '/escolas';
        } else if (String.fromCharCode(e.which) == 3) {
            window.location.href = '/noticias';
        } else if (String.fromCharCode(e.which) == 4) {
            window.location.href = '/eventos';
        } else if (String.fromCharCode(e.which) == 5) {
            window.location.href = '/contato';
        }
    });
});

Answer 5

如果你想要幻想：

 $(document).ready(function() { 'use strict'; const addresses = [ { codes: [49, 97], path: '/' }, { codes: [50, 98], path: '/escolas' }, { codes: [51, 99], path: '/noticias' }, { codes: [52, 100], path: '/eventos' }, { codes: [52, 101], path: '/contato' } ] $(document).on("keyup", evt => { const key = evt.which; addresses.map(address => { if(address.codes.filter(code => code === key).length) window.location.href = address.path; }) }); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>