Странная граница в tabIndex на элементе

#jquery #html #css #tabindex

#jquery #HTML #css #tabindex

Вопрос:

В настоящее время я пытаюсь сделать некоторый показ / скрытие контента более доступным на большом сайте (более 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. Есть предложения, как от этого избавиться?

Ответ №1:

что насчет:

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

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

Ответ №2:

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

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

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

1. 1 Это замечательно. Как раз то, что мне было нужно. Все еще хочу [tabindex] выделять при табуляции, но переключатели действительно раздражают, когда при щелчке мышью получается этот раздражающий контур. Это войдет в мои хитрости!

Ответ №3:

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

 [tabindex] {
   outline: none !important;
}

Ответ №4:

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

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

Ответ №5:

Но пользователь должен видеть контур при наведении фокуса при нажатии клавиши tab.

Ответ №6:

 <div class="className" tabIndex="1" style={{outline: 0}}>
    <p> Try this... I hope this works!</p>
<div>