Question

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

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

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

我正在考虑在每个tabindex上设置tr，这在Firefox中有效（我能够在项目中进行选项卡，但不能点击它们），但在Chrome中没有。

如何使用键盘循环浏览包含onclick的所有元素？如果没有纯HTML，可能使用JQuery。

Answer 1

我建议您只需将元素包装在锚标记中（<a>）。

Answer 2

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

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

Answer 3

fiddle。 Tabindex适合我使用chrome 12。

你的实际问题是什么？

Answer 4

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

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

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

Answer 5

类似于this fiddle？

的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();
    }
});

Answer 6

我希望这样的事可能适合你，（它不适合我，我在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>

Answer 7

使用tabindex="0"可使您使用Tab键导航并将焦点移至元素/行。但是，无法通过keyborad触发onclick事件。

要解决此问题，请添加一个触发onkeydown事件的onclick事件：

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

模拟点击时，您需要过滤掉除space（32）和enter（13）以外的其他按键。

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

有没有办法让所有onclick元素可以通过键盘导航？

7 个答案:

的jQuery