Search code examples
javascriptjquerykeypress

Key stroke to existing keystroke function does not work in Chrome


I have a keystroke function that will open a webpage based on key press. For example a key press of "Alt+s" will open the about web page the issue is that it does not seem to work in the Google Chrome browser.

I need it to work in all but cant seem to get it to work properly.

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

Solution

  • The issue lies in the difference between keydown and keypress. The alt key changes the keycode value when you use keypress.

    • keypress alt + a = 229
    • keypress a = 97
    • keydown alt + a = 65
    • keydown a = 65

    From the docs:

    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.

    You can fix this by either changing to a keydown listener (ala @adeneo's suggestion) or edit your keycodes appropriately.