Forum Moderators: open
- John
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Power Keys</title>
<script type="text/javascript">
document.onkeypress = function(e) {
// Use S to give focus to search text field
if (e.keyCode == 83) {
document.getElementById("query_string").focus();
}// Use F2 key to give focus to search text field
else if (e.keyCode == 113) {
document.getElementById("query_string").focus(); return false;
}// Use F4 key to give focus to search text field
else if (e.keyCode == 115) {
alert ("This is a Javascript Alert!");
}}
</script>
<style type="text/css">#query_string:focus {background: #abc;}</style>
</head><body>
<p>Press F2 to give focus to search text field, use keycode 83 to assign to letter S though it will not work?</p>
<form>
<fieldset>
<label for="query_string">Search Site</label><input id="query_string" type="text" value="Search this site..." /><input type="submit" value="Search" />
</fieldset>
</form></body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Power Keys</title>
<script type="text/javascript">
document.onkeypress = function(e) {
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
var character = String.fromCharCode(code);
alert('Character for code ' + code + ' was ' + character);
// Use S to give focus to search text field
if (code == 83) {
document.getElementById("query_string").focus();
}// Use F2 key to give focus to search text field
else if (code == 113) {
document.getElementById("query_string").focus(); return false;
}// Use F4 key to give focus to search text field
else if (code == 115) {
alert ("This is a Javascript Alert!");
}}
</script>
<style type="text/css">#query_string:focus {background: #abc;}</style>
</head><body>
<p>Press F2 to give focus to search text field, use keycode 83 to assign to letter S though it will not work?</p>
<form>
<fieldset>
<label for="query_string">Search Site</label><input id="query_string" type="text" value="Search this site..." /><input type="submit" value="Search" />
</fieldset>
</form></body>
</html>
- John
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Power Keys</title>
<script type="text/javascript">
document.onkeypress = function(e) {switch (e.which) {
case 115: document.getElementById("query_string").focus();
return false;
}}
</script>
<style type="text/css">#query_string:focus {background: #abc;}</style>
</head><body>
<p>Press F2 to give focus to search text field, use keycode 83 to assign to letter S though it will not work?</p>
<form>
<fieldset>
<label for="query_string">Search Site</label><input id="query_string" type="text" value="Search this site..." /><input type="submit" value="Search" />
</fieldset>
</form></body>
</html>
// IE doesn't pass the event to the function. It uses a global
// window.event object instead, so here's where you
// determine if the event was passed in or not. If not,
// it must be IE, so use window.event:
if (!e) var e = window.event;
// Some browsers have a keyCode property of the event while
// others have a which property.
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
Uppercase and lowercase will likely have different keycodes.
2 quick suggestions, use the accesskey property on your tags, not sire exactly how these work as I've not used them, I hope Fotiman can expand on this.
Make a test page, that whenever you press ANY key it will alert you the code. I think this will come in extremely handy if you're adding keyboard support to a page.
Good idea BTW, make F1 pop up a help page!
Uppercase and lowercase will likely have different keycodes.
Excellent point! It's not "likely" they will have different keycodes, they "DEFINATELY" will have different keycodes. For that reason, maybe you want to look explicitly for the character. This should work for both IE and Firefox:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Power Keys</title>
<script type="text/javascript">
document.onkeypress = function(e) {
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
var character = (String.fromCharCode(code)).toLowerCase();// Use S to give focus to search text field
if (character == "s") {
document.getElementById("query_string").focus();
}}
</script>
<style type="text/css">#query_string:focus {background: #abc;}</style>
</head><body>
<p>Press F2 to give focus to search text field, use keycode 83 to assign to letter S though it will not work?</p>
<form>
<fieldset>
<label for="query_string">Search Site</label><input id="query_string" type="text" value="Search this site..." /><input type="submit" value="Search" />
</fieldset>
</form></body>
</html>
2 quick suggestions, use the accesskey property on your tags, not sire exactly how these work as I've not used them, I hope Fotiman can expand on this.
However, maybe you could modify your script to search for all accesskey values and use those to create your 1 key access code?
[edited by: Fotiman at 5:24 pm (utc) on April 24, 2007]
However, maybe you could modify your script to search for all accesskey values and use those to create your 1 key access code?
Another good idea! Aren't we full of them today? That would also comply with the "unobtrusive JS" and "still works with JS disabled" methods.
