当前位置：文江博客话题详情

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

发布于 2024-11-15 03:17:03 字数 376 浏览 4 评论 0原文

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

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

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

我正在考虑在每个 tr 上设置 tabindex，这在 Firefox 中有效（我可以通过选项卡浏览项目，但不能单击它们），但在 Chrome 中却不行。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

屋檐 2024-11-22 03:17:03

我建议您只需将元素包装在锚标记 () 中。

回复收藏 0 原文

咋地 2024-11-22 03:17:03

小提琴。 Tabindex 对我来说适用于 chrome 12。

你的实际问题是什么？

回复收藏 0 原文

皇甫轩 2024-11-22 03:17:03

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

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

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

回复收藏 0 原文

谜兔 2024-11-22 03:17:03

像这个小提琴之类的东西？

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">> </span>');
        
        // Show the content div
        $lastTd.find('div').fadeIn();
    }
});

Something like 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">> </span>');
        
        // Show the content div
        $lastTd.find('div').fadeIn();
    }
});

回复收藏 0 原文

浊酒尽余欢 2024-11-22 03:17:03

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

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

回复收藏 0 原文

国产ˉ祖宗 2024-11-22 03:17:03

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

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

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

您需要过滤掉除 space(32) 和模仿点击时输入(13)。

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

Using tabindex="0" allows you to navigate and move focus to the element/row with the tab-key. However, there is no way to trigger the onclick event by keyboard.

To overcome this, add an onkeydown event that triggers the onclick event:

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

You need to filter out other keypresses, except for space(32) and enter(13) when mimicing a click.

This listener would be better to put in a script rather than inline, but i'm just demonstrating the concept here.

回复收藏 0 原文

[浮城] 2024-11-22 03:17:03

我希望这样的东西对你有用（这对我不起作用，我在 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>

I hope something like this might work for you, (it does not for me, i am poor at JS). You could edit it and you would get an invisible button filling the background of the table element and to tell the user which is selected you could have borders.

<!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>

回复收藏 0 原文

满栀 2024-11-22 03:17:03

我知道这个问题很旧，但这是我的解决方案。

这样你就可以动态地使用它：

$(function () {
  $('#first-item').on('click', function() {
    console.log('First item clicked')
  });
  $('#second-item').on('click', function() {
    console.log('Second item clicked')
  });
  $('#third-item').on('click', function() {
    console.log('Third item clicked')
  });
  
  // This is the function for the keyboard
  $('.keyboard').on('keyup', function(e) {
    if (e.keyCode === 13 || e.keyCode === 32) {
      $(this).trigger('click');
    }
  });
});

.container {
  display: flex;
}

.container div, .container a {
  margin: 3px;
  padding: 10px;
  border: 1px solid #cdcdcd;
  border-radius: 5px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="container">
  <div id="first-item" class="keyboard" tabindex="0">A</div>
  <div id="second-item" class="keyboard" tabindex="0">B</div>
  <a id="third-item" class="keyboard" tabindex="0">C</a>
</div>

I know this question is old, but this is my solution.

That way you can use it dynamically:

$(function () {
  $('#first-item').on('click', function() {
    console.log('First item clicked')
  });
  $('#second-item').on('click', function() {
    console.log('Second item clicked')
  });
  $('#third-item').on('click', function() {
    console.log('Third item clicked')
  });
  
  // This is the function for the keyboard
  $('.keyboard').on('keyup', function(e) {
    if (e.keyCode === 13 || e.keyCode === 32) {
      $(this).trigger('click');
    }
  });
});

.container {
  display: flex;
}

.container div, .container a {
  margin: 3px;
  padding: 10px;
  border: 1px solid #cdcdcd;
  border-radius: 5px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="container">
  <div id="first-item" class="keyboard" tabindex="0">A</div>
  <div id="second-item" class="keyboard" tabindex="0">B</div>
  <a id="third-item" class="keyboard" tabindex="0">C</a>
</div>

回复收藏 0 原文

~没有更多了~