我有一个包含 3X4 单元格的表格，我使用箭头键(右、左、上、下)在单元格之间导航，但问题是最初我需要按 Tab 键才能将焦点移到第一个单元格，只有在那之后我才能使用箭头键进行导航。现在我的问题是如何将焦点设置到表格的第一个单元格，以便我可以直接使用箭头键进行导航，而不是首先使用制表符和箭头键。
这是我的代码:
function myNav(e,down,left,up,right)
{
if (!e) e=window.event;
var selectArrowKey;
switch(e.keyCode)
{
case 37:
selectArrowKey = left;
break;
case 38:
selectArrowKey = 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();
}
请帮忙。
最佳答案
在页面加载时，检索对该单元格的引用并调用 focus在上面。您还没有显示您的标记，因此很难给您提供具体的示例，但是例如，如果您的表有 id “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;
}
就“页面加载”而言，您可以挂接 window.onload事件(但这发生得很晚)，或者只是将脚本元素放在 body 的底部执行上述操作的标签(或表格后的任何位置)。一旦table标签已关闭，您可以从脚本访问它( ref1 、 ref2 )。
离题:如果您使用像 jQuery 这样的库, Prototype , YUI , Closure ，或any of several others ，代码可以变得简单很多。例如，使用 jQuery，上面的内容将更改为:
$("#foo td:first").focus();
更新:响应您下面的评论，您的 jsFiddle 代码是:
<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>
三个问题导致 fiddle 无法工作:
- 您没有成功包含 jquery。在您的系统上，路径
jquery-1.4.4.js可能会给你 jQuery，但 jsFiddle 显然不在你的系统上。 - 您正尝试在创建元素之前访问该元素。您的第一行脚本代码会立即执行，但由于脚本位于文件中表格的上方，因此它会失败，因为该元素不存在。
- 您的选择器正在选择表格单元格；我猜你确实想要这个按钮。
分别:
- 第二个和第三个
button标签没有关闭。浏览器可能会悄悄地为您关闭它们，但是调试此类事情的第一步是确保您的标记正确并且 valid 。有效的标记会产生影响。 button内图像中的路径“C:\Documents and Settings\ing12732\Desktop\html_files\tv-dev\image2.png”等标签向我表明您正在尝试在不使用 Web 服务器的情况下进行 Web 开发。 强烈建议使用网络服务器和正确的路径，浏览器在处理本地文件而不是通过 HTTP 加载的资源时会以不同的方式执行各种操作。- 强烈建议使用
DOCTYPE。任何DOCTYPE，虽然我更喜欢 HTML5 的<!DOCTYPE html>(more)。
Here's a corrected fiddle.希望这会有所帮助。
关于javascript - 使用 html/javascript 将焦点设置到表格的第一个单元格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4601564/