Странная граница tabIndex на элементе ‹p›

В настоящее время я пытаюсь сделать некоторый контент с отображением/скрытием более доступным на большом сайте (более 30 000 страниц), и я столкнулся со странной ошибкой при добавлении tabindex, где появляется пунктирная рамка при нажатии на элемент управления, чтобы открыть скрытый контент.

Настройка с тегом p, по которому вы щелкаете, чтобы исчезнуть в div, который показывает скрытое содержимое. Я вообще не могу изменять HTML-код, потому что на сайте их тысячи, так что мне приходится работать именно с этим. На данный момент, чтобы добавить tabindex, я делаю это динамически с помощью jQuery, добавляя постоянно увеличивающийся индекс табуляции к каждому тегу p.

Первым делом я избавился от этой странной границы, попробовав CSS:

#content div.showHide p.showHideTitle:focus, 
#content div.showHide p.showHideTitle::focus, 
#content div.showHide p.showHideTitle::-moz-focus-border {
    outline: 0px !important; border: 0px !important;
}

Это работает в Chrome и Safari, но в IE8 и Firefox 3.6 я по-прежнему получаю рамку, когда нажимаю тег p. Любые предложения о том, как избавиться от него?


html jquery css tabindex
person redroot    schedule 01.06.2011    source источник
comment
Я не понимаю. Как скрыть контур, чтобы остановить клавиатуру, только пользователи, знающие, где находится фокус, помогают с доступностью?   -  person Alohci    schedule 01.06.2011

Ответы (6)


arrow_upward
21
arrow_downward

что насчет:

#content div.showHide p.showHideTitle {
    outline: none !important; 
}

Вы устанавливаете стиль контура для псевдокласса :focus, но это может быть "слишком поздно". Вот простой jsFiddle

person DanielB    schedule 01.06.2011

arrow_upward
7
arrow_downward

У меня есть лучшее решение этой проблемы, гибридный javascript/css.

$('[tabindex]').focus(function()
{
    $(this).css('outline', 'none');
});
$('[tabindex]').keyup(function (event)
{
    if(event.keyCode == 9)
    {
        $(this).css('outline', '');
    }
});

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

person James McDonnell    schedule 05.02.2014
comment
+1 Это прекрасно. Как раз то, что мне было нужно. По-прежнему хочется, чтобы [tabindex] выделялся при переходе по табуляции, но для переключателей действительно раздражает появление этого раздражающего контура при щелчке мышью. Это войдет в мою сумку-о-трюков! - person Phil Tune; 17.10.2014

arrow_upward
6
arrow_downward

Хотя это и не самый эффективный селектор CSS, вы можете удалить его из всех элементов DOM с атрибутами tabindex только следующим CSS:

[tabindex] {
   outline: none !important;
}
person Aran    schedule 29.10.2013

arrow_upward
0
arrow_downward

Вы пытались установить css с помощью своего скрипта? Что-то вроде

$("#content div.showHide p.showHideTitle").focus(function () {
     $(this).css('border','0');
});
person Jason Gennaro    schedule 01.06.2011

arrow_upward
0
arrow_downward

Но пользователь должен видеть контур, когда фокусируется нажатием табуляции.

person Shrishail Uttagi    schedule 14.02.2019

arrow_upward

arrow_downward

person    schedule
comment
Письменное объяснение того, почему это может работать, когда другие ответы не увенчались успехом, будет оценено по достоинству. - person Pro Q; 18.10.2020