Controlling the accessKey Property
October 15, 2009
For many elements ,you can specify a keybord character that, when typed as an Alt+key combination (windows) or Ctrl+key (mac) brings focus to that element.
The example below shows how to use the accessKey property to manipulate the keyboard interface for navigating a web page.When you load the script abjust the height of the browser window so that you can see nothing below the second dividing rule.Enter any character into the settings portion of the page and press Enter.Then hold down the Alt (windows) or Ctrl (mac) key while pressing the same keybord key.
Code:
<html>
<head>
<title>accessKey Property</title>
<script type="text/javascript">
function assignKey(type, elem)
{
if(window.event.keyCode == 13)
{
switch(type)
{
case "button":
document.forms["output"].access1.accessKey = elem.value;
break;
case "text":
document.forms["output"].access2.accessKey = elem.value;
break;
case "table":
document.getElementById("myTable").accessKey = elem.value;
}
return false;
}
}
</script>
</head>
<body>
<h1>
accessKey property lab</h1>
<hr />
Settings:<br />
<form name="input">
Assign an accessKey value to the button below and press return:
<input type="text" size="2" maxlength="1" onkeypress="assignKey('button', this)" /><br />
Assign an accessKey value to the text box below and press return:
<input type="text" size="2" maxlength="1" onkeypress="assignKey('text', this)" /><br />
Assign an accessKey value to the table below (IE5.5+) and press return:
<input type="text" size="2" maxlength="1" onkeypress="assignKey('table', this)" /><br />
</form>
<br />
Then press Alt (windows) or control (mac) + the key.<br />
<i>Size the browser window to view nothing lower than this line.</i>
<form name="output" onsubmit="return false">
<input type="button" name="access1" value="Standar Button" />
<input type="text" name="access2" />
</form>
<table>
<tr>
<th>Quantity</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<tbody bgcolor="red">
<td width="100">4</td>
<td>primary widget</td>
<td>15</td>
</tr>
<tr>
<td>10</td>
<td>secondary widget</td>
<td>100</td>
</tr>
</tbody>
</table>
</body>
</html>
One Response to “Controlling the accessKey Property”
Leave a Reply
You must be logged in to post a comment.
September 6th, 2010 at 8:59 pm
Buy:Lumigan.Actos.Zovirax.Synthroid.Zyban.Prednisolone.Mega Hoodia.100% Pure Okinawan Coral Calcium.Nexium.Petcam (Metacam) Oral Suspension.Arimidex.Valtrex.Human Growth Hormone.Retin-A.Accutane.Prevacid….