1

リンクとフォーム フィールドを使用tabして、トラフを循環させてアクティブにすることができます。

ただし、私のコードでは、onclickさまざまなアクションを実行する属性を持つ多くの要素を使用しています。たとえばtable、それぞれtrがクリック可能で、クリックすると展開されます。

ここで、自分のページをキーボードのみでも閲覧できるようにしたいと考えています。

tabindex私は Firefox で機能する各の設定を考えてtrいました (アイテムをタブで移動できましたが、クリックできませんでした)が、Chrome では機能しませんでした。

キーボードを使用して onclick を含むすべての要素を循環するにはどうすればよいですか? プレーンな HTML でない場合は、おそらく JQuery を使用します。

4

7 に答える 7

2

単純に要素をアンカー タグ ( <a>) で囲むことをお勧めします。

于 2011-06-10T13:45:21.517 に答える
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 に答える
1

あなたができることは、選択された現在の要素を追跡することです。onclickユーザーがヒットするたびに - ~ ボタンとしましょう - 次のボタンに移動し、Enter キーを押すと、.click();その要素の をトリガーするだけです。

私はjsfiddleで例を設定しました: http://jsfiddle.net/dvirazulay/4kJnM/

これは一種のタブインデックスの再実装であり、実際のセレクターを好みに合わせて変更することができます...

于 2011-06-10T13:49:02.877 に答える
1

フィドル。Tabindex は chrome 12 で動作します。

あなたの実際の問題は何ですか？

于 2011-06-10T13:42:22.737 に答える
1

行の onclick と同じアクションを実行するボタンを行に配置してみませんか?

ボタン (またはリンク) もスクリーン リーダーによって取得されます。

于 2011-06-10T13:29:03.503 に答える
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 に答える