setting focus to first cell of table using html/javascript
i have table with 3X4 cells i navigate among cells using arrow keys(right,left,up, down) but problem is initially i need to press tab key to get focus to first cell and only after that i will be able to use arrow key to navigate. now my question is how can i set focus to first cell of table so that i can directly use arrow keys to navigate instead use tab first and they arrow keys.
here is my code:
function myNav(e,down,left,up,right)
{
if (!e) e=window.event;
var selectArrowKey;
switch(e.keyCode)
{
case 37:
selectArrowKey = left;
break;
case 38:
sel开发者_如何学JAVAectArrowKey = down;
break;
case 39:
selectArrowKey = right;
break;
case 40:
selectArrowKey = up;
break;
}
if (!selectArrowKey) return;
var controls = document.getElementsByName(selectArrowKey);
if (!controls) return;
if (controls.length != 1) return;
controls[0].focus();
}
kindly help.
On page load, retrieve a reference to that cell and call focus on it. You haven't shown your markup, so it's hard to give you a concrete example, but for instance if your table has an id of "foo":
var node = findFirstChild(document.getElementById('foo'), 'TD');
if (node) {
// get the control within the cell
node.focus();
}
function findFirstChild(parent, tag) {
var node, child;
for (node = parent.firstChild; node; node = node.nextSibling) {
if (node.nodeType == 1) { // Element
if (node.tagName === tag) {
return node;
}
child = findFirstChild(node, tag);
if (child) {
return child;
}
}
}
return undefined;
}
In terms of "page load", you can either hook the window.onload event (but that happens very late), or just put a script element at the bottom of the body tag (or anywhere after the table) that does the above. Once the table tag is closed, you can access it from script (ref1, ref2).
Off-topic: If you use a library like jQuery, Prototype, YUI, Closure, or any of several others, the code can get a lot simpler. For instance, with jQuery, the above changes to:
$("#foo td:first").focus();
Update: Responding to your comment below, your jsFiddle code was:
<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
$("#mycell td:first").focus();
function myTest(e,down,left,up,right)
{
if (!e) e=window.event;
var selectArrowKey;
switch(e.keyCode)
{
case 37:
// Key links.
selectArrowKey = left;
break;
case 38:
// Key oben.
selectArrowKey = down;
break;
case 39:
// Key rechts.
selectArrowKey = right;
break;
case 40:
// Key unten.
selectArrowKey = up;
break;
}
if (!selectArrowKey) return;
var controls = document.getElementsByName(selectArrowKey);
if (!controls) return;
if (controls.length != 1) return;
controls[0].focus();
}
var node = findFirstChild(document.getElementById('mycell'), 'TD');
if (node) {
// get the control within the cell
node.focus();
}
function findFirstChild(parent, tag) {
var node, child;
for (node = parent.firstChild; node; node = node.nextSibling) {
if (node.nodeType == 1) { // Element
if (node.tagName === tag) {
return node;
}
child = findFirstChild(node, tag);
if (child) {
return child;
}
}
}
return undefined;
}
</script>
</head>
<body>
<table id="mycell" border="1" cellpadding="0" cellspacing="0">
<tr>
<td><button name="obenLinks" onkeydown="myTest(event,undefined,undefined,'mitteLinks','obenMitte')"><img src="C:\Documents and Settings\ing12732\Desktop\html_files\tv-dev\image2.png" ></button></td>
<td><button name="obenMitte" onkeydown="myTest(event,undefined,'obenLinks','mitteMitte','obenRechts')"><img src="C:\Documents and Settings\ing12732\Desktop\html_files\tv-dev\image2.png" ></td>
<td><button name="obenRechts" onkeydown="myTest(event,undefined,'obenMitte','mitteRechts',undefined)"><img src="C:\Documents and Settings\ing12732\Desktop\html_files\tv-dev\image2.png" ></td>
</tr>
</table>
</body>
</html>
Three issues prevented that fiddle from working:
- You weren't successfully including jquery. On your system, the path
jquery-1.4.4.jsmay give you jQuery, but jsFiddle is obviously not on your system. - You're trying to access an element before it's been created. Your first line of script code happens right away, but since the script is above the table in the file, it fails because the element isn't there.
- Your selector is selecting the table cell; I'm guessing you actually want the button.
Separately:
- The second and third
buttontags weren't closed. The browser probably quietly closes them for you, but one of the first steps in debugging this sort of thign is to make sure your markup is correct and valid. Valid markup make a difference. - The paths "C:\Documents and Settings\ing12732\Desktop\html_files\tv-dev\image2.png" and the like in the images inside the
buttontags indicate to me that you're trying to do web development without using a web server. Strongly recommend using a web server and proper paths, browsers do various things differently when dealing with local files rather than resources loaded via HTTP. - Strongly recommend using a
DOCTYPE. AnyDOCTYPE, although my preferred one is HTML5's<!DOCTYPE html>(more).
Here's a corrected fiddle. Hope this helps.
加载中,请稍侯......
精彩评论