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>
The issue lies in the difference between keydown
and keypress
. The alt
key changes the keycode value when you use keypress
.
alt
+ a
= 229a
= 97alt
+ a
= 65a
= 65From 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.