现有击键功能的击键在 Chrome 中不起作用

Question

我有一个击键功能，可以根据按键打开网页。例如，按 "Alt+s" 将打开关于网页问题是它似乎在 Google Chrome 浏览器中不起作用。

我需要它正常工作，但似乎无法正常工作。

    <html>
    <script type='text/javascript'>//<![CDATA[


   $(window).load(function(){
    $(document).ready(function() {
      // hides all DIVs with the CLASS container
      // and displays the one with the ID 'home' only

      $(".container").css("display", "none");
      $("#home").css("display", "block");

      // makes the navigation work after all containers have bee hidden 

      showViaLink($("ul#navigation li a"));

      // listens for any navigation keypress activity

      $(document).keypress(function(e) {
        e.preventDefault();
        if (e.altKey) {
          switch (e.which) {
            // user presses the "a"
            case 97:
              showViaKeypress("#home");
              break;

              // user presses the "s" key
            case 115:
              showViaKeypress("#about");
              break;

              // user presses the "d" key
            case 100:
              showViaKeypress("#contact");
              break;

              // user presses the "f" key
            case 102:
              showViaKeypress("#awards");
              break;

              // user presses the "g" key 
            case 103:
              showViaKeypress("#links");
          }
        }
      });

    });

    // shows a given element and hides all others
    function showViaKeypress(element_id) {
      $(".container").css("display", "none");
      // if multiple keys are pressed rapidly this will hide all but the last pressed key's div
      $(".container").hide(1);
      $(element_id).slideDown("slow");
    }

    // shows proper DIV depending on link 'href'
    function showViaLink(array) {
      array.each(function(i) {
        $(this).click(function() {
          var target = $(this).attr("href");
          $(".container").css("display", "none");
          $(target).slideDown("slow");
        });
      });
    }

    });//]]> 

    </script>      
    </head>

    <body>
      <div id="header">
      <h1>jQuery Keypress Navigation</h1>
      <ul id="navigation">
        <li><a href="#home">Home ( a )</a></li>
        <li><a href="#about">About ( s )</a></li>
        <li><a href="#contact">Contact ( d )</a></li>
        <li><a href="#awards">Awards ( f )</a></li>
        <li><a href="#links">Links ( g )</a></li>
      </ul>
    </div>
    <div style="display: block;" id="home" class="container">
      <h2>Welcome!</h2>
      <p>Thanks for taking the time to visit my site</p>
    </div>
    <div style="display: none;" id="about" class="container">
      <h2>About Me</h2>
      <p>Web design is more than just another job, is more than hobby.</p>
    </div>
    <div style="display: none;" id="contact" class="container">
      <h2>No Spam Please</h2>
      <p>Gifts? Job offers? Compliments? They are all welcome.</p>

    </div>
    <div style="display: none;" id="awards" class="container">
      <h2>Awards, So Many ...</h2>
      <p>If I was to count all of them, we would be here for quite a while. I wish.</p>
    </div>
    <div style="display: none;" id="links" class="container">
      <h2>Cool Sites</h2>
      <p>Make sure you pay a visit to these sites:</p>
    </div>
    <div id="footer">
      <p>&nbps;</p>
    </div>

    </body>
    </html>

Answer 1

问题在于keydown和keypress的区别。当您使用 keypress.

时，alt 键会更改键码值

按键 alt + a = 229
按键a = 97
按键按下 alt + a = 65
按键按下 a = 65

来自文档：

Note that keypress docs, keydown and keyup provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase "A" is reported as 65 by all events. Because of this distinction, when catching special keystrokes such as arrow keys, .keydown() or .keyup() is a better choice.

您可以通过更改为 keydown 侦听器（ala @adeneo 的建议）或适当地编辑您的键码来解决此问题。

现有击键功能的击键在 Chrome 中不起作用

Key stroke to existing keystroke function does not work in Chrome

javascript

jquery

keypress