Есть ли способ сделать все элементы onclick ориентированными на клавиатуру? - PullRequest
Новая
       42

Есть ли способ сделать все элементы onclick ориентированными на клавиатуру?

1 голос
/ 10 июня 2011

Со ссылками и полями формы вы можете использовать tab для циклического перехода и активации их.

В моем коде, однако, я использую множество элементов, которые имеют атрибут onclick для выполнения различных действий.Например, table, где каждый tr кликабелен и расширяется при клике.

Теперь я хочу, чтобы моя страница также была доступна для просмотра только с клавиатуры.

Я думал о настройкеtabindex на каждом tr, который работал в Firefox (я мог перемещаться по элементам, но не нажимал на них), но не в Chrome.

Как я могу перебирать все элементы, содержащие onclickиспользуя клавиатуру?Если не с простым HTML, возможно с JQuery.

Ответы [ 6 ]

2 голосов
/ 10 июня 2011

Я бы рекомендовал вам просто обернуть элементы в теги привязки (<a>).

1 голос
/ 10 июня 2011

Что-то вроде этой скрипки ?

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();
    }
});
1 голос
/ 10 июня 2011

Что вы можете сделать, это отслеживать текущий элемент с выбранным onclick, и каждый раз, когда пользователь нажимает - скажем, кнопку ~ - он будет переходить к следующему, а когда он нажимает Enter - просто вызывать.click(); для этого элемента.

Я создал пример для jsfiddle: http://jsfiddle.net/dvirazulay/4kJnM/

Это своего рода повторная реализация tabindex, и вы могли бы сделать это лучше и изменитьфактический селектор на ваш вкус ...

1 голос
/ 10 июня 2011

скрипка .Tabindex работает для меня в Chrome 12.

В чем ваша проблема?

1 голос
/ 10 июня 2011

Почему бы не поместить в строку кнопку, которая будет выполнять то же действие, что и нажатие строки?

Кнопка (или ссылка) также будет считываться программой чтения с экрана.

0 голосов
/ 10 июня 2011

Я надеюсь, что что-то подобное может сработать для вас (это не для меня, я плох в 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>
...