1

使用链接和表单字段，您可以使用tab它们来循环和激活它们。

然而，在我的代码中，我使用了很多元素，这些元素具有onclick执行不同操作的属性。例如 a table，其中每个tr都是可点击的并在点击时展开。

现在我希望我的页面也只能通过键盘浏览。

我正在考虑设置tabindexeach tr，它在 Firefox 中有效（我可以通过标签浏览这些项目，但不能点击它们），但在 Chrome 中没有。

如何使用键盘循环浏览所有包含 onclick 的元素？如果不是纯 HTML，也许是 JQuery。

4

7 回答 7

2

我建议您简单地将元素包装在锚标记 ( <a>) 中。

于 2011-06-10T13:45:21.517 回答
1

为什么不在该行上放置一个按钮，该按钮将执行与该行的 onclick 相同的操作？

屏幕阅读器也会拾取按钮（或链接）。

于 2011-06-10T13:29:03.503 回答
1

小提琴。Tabindex 适用于我的 chrome 12。

你的实际问题是什么？

于 2011-06-10T13:42:22.737 回答
1

您可以做的是跟踪当前元素的onclick选定，并且每次用户点击 - 比如说 ~ 按钮 - 它会移动到下一个，当他点击 Enter 时 - 只需触发该.click();元素。

我在 jsfiddle 上设置了一个示例：http: //jsfiddle.net/dvirazulay/4kJnM/

这是一种重新实现 tabindex 的方法，您可以做得更好，并根据自己的喜好更改实际的选择器......

于 2011-06-10T13:49:02.877 回答
1

像这样的小提琴？

jQuery

var currentRow = -1;
$lastTd = jQuery();

$(document).keyup(function(event) {
    if ($.inArray([38, 40], event.keyCode)) {
        var $rows = $('table > tbody > tr');
        var newRow = currentRow + (event.keyCode == 40 ? 1 : -1);
        if (newRow > $rows.length - 1 || newRow < 0) return;
        
        currentRow = newRow;
        
        $lastTd.find('>div').hide();
        $lastTd.find('>span.indicator').remove();
        
        $lastTd = $rows.eq(currentRow)
                .find('>td')
                .prepend('<span class="indicator">&gt; </span>');
        
        // Show the content div
        $lastTd.find('div').fadeIn();
    }
});
于 2011-06-10T14:05:48.477 回答
0

我希望这样的事情可能对你有用，（它不适合我，我不擅长 JS）。你可以编辑它，你会得到一个填充表格元素背景的不可见按钮，并告诉用户哪个被选中，你可以有边框。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Nav</title>
        <style>
            table#sample {
                border-width: 1px;
                border-spacing: 2px;
                border-style: outset;
                border-color: gray;
                border-collapse: separate;
                background-color: white;
            }
            table#sample th {
                border-width: 1px;
                padding: 1px;
                border-style: inset;
                border-color: gray;
                background-color: white;
                -moz-border-radius: ;
            }
            table#sample td {
                border-width: 1px;
                padding: 1px;
                border-style: inset;
                border-color: gray;
                background-color: white;
                -moz-border-radius: ;
            }

        </style>
    </head>
    <body>
        <table id="sample">
            <tr>
                <th>Sample</th>
                <th>Sample</th>
            </tr>
            <tr>
                <td ="section1">1</td>
                <td id="section2">2</td>
            </tr>
            <tr>
                <td id="section3">3</td>
                <td id="section4">4</td>
            </tr>
            <tr>
                <td id="section5">5</td>
                <td id="section6">6</td>
            </tr>
            <tr>
                <td id="section7">7</td>
                <td id="section8">8</td>
            </tr>
        </table>
        <script>
            var sec;
            var inside;
            for (var i=1; i < 9; i++) {
                sec = "section" + i;
                inside = "<input type='button' tabindex='" + i + "' />"
                document.getElementById(sec).innerHTML = inside;
            };
        </script>
    </body>
</html>
于 2011-06-10T14:05:46.070 回答
0

使用tabindex="0"允许您使用制表键导航并将焦点移动到元素/行。但是，没有办法onclick通过键盘触发事件。

为了克服这个问题，添加一个onkeydown触发事件的onclick事件：

<tr
  onclick="doYourStuff();"
  onkeydown="if(event.keyCode == 13 || event.keyCode == 32){event.target.click()}"
  tabindex="0">

在模拟点击时，您需要过滤掉除space(32) 和enter(13) 之外的其他按键。

这个监听器最好放在脚本中而不是内联，但我只是在这里展示这个概念。

于 2020-08-13T12:29:58.180 回答