Скрыть фокус контура на ссылке при нажатии

Мне нужно скрыть контур фокуса, когда я нажимаю на ссылку. Но мне также нужно показать это, когда я двигаю ссылки с tabindex. Некоторые веб-сайты делают это с помощью какого-либо конкретного обходного пути. Кажется, это поведение по умолчанию. Но на моем веб-сайте, когда я нажимаю на ссылку, она также показывает схему. Как я могу показать его контур только тогда, когда я двигаю ссылки с помощью клавиши tabindex? Заранее спасибо. Гельмут


focus css hyperlink outline tabindex
person Hel00    schedule 02.07.2014    source источник
comment
что у вас есть на данный момент? Удаление контура — это простая манипуляция CSS, в какой-то момент это может быть немного сложнее, но не выглядит невозможным. Вы уже прочитали эту статью?   -  person Laurent S.    schedule 02.07.2014
comment
Да, я знаю, что могу удалить контур с помощью свойств css, но мне нужно ПОКАЗАТЬ его, когда я нажимаю клавишу tabindex, как это делает и домашняя страница Google.   -  person Hel00    schedule 02.07.2014

Ответы (1)


arrow_upward
1
arrow_downward

Если поведение вкладки — это именно то, что вам нужно определить при настройке свойства структуры CSS, я не верю, что CSS может определить тип устройства ввода по таким состояниям, как :focus или :active.

Вместо этого вы можете скрыть контур всех элементов на странице с помощью CSS:

a:focus, a:active {
  outline:0;
}
a.tabbed {
  outline:1px solid red;
}

Затем вы должны использовать JavaScript для настройки контура определенных элементов, которые получают фокус с помощью клавиши табуляции.

document.addEventListener('keyup', function (e) {
    var code = e.keyCode ? e.keyCode : e.which;
    var el = document.activeElement;

    if (code == 9 && el.tagName == 'A') {
        el.className = "tabbed";
    }
}, true);

Я добавил быстрый пример: http://codepen.io/anon/pen/aljsu

person nwinch    schedule 04.07.2014