Удалить или отключить границу фокуса браузера через javascript

Кто-нибудь знает, как отключить или манипулировать (в большинстве браузеров) пунктирной границей элемента dom, если он имеет фокус в порядке tabindex?

Я хочу создать свой собственный стиль для целевого элемента, но было бы здорово использовать существующую функцию, потому что с tabindex можно привязать событие keydown к элементу dom.


person helle    schedule 10.06.2010    source источник


Ответы (6)


Просто создайте правило CSS для элементов, которые должны иметь outline:none;

person Gabriele Petrioli    schedule 10.06.2010
comment
Это неплохо, если вы щелкнете мышью по элементу, эта граница больше не появится, но если вы перемещаетесь с помощью клавиатуры? Как выделить элемент? - person coorasse; 05.04.2013
comment
@coorasse, если вы хотите скрыть его только для кликов, вам нужно будет использовать javascript и вызывать .blur() для элемента, как только вы щелкнете по нему .. - person Gabriele Petrioli; 05.04.2013
comment
эпический короткий ответ :) +1 - person Al-Hanash Moataz; 13.08.2020
comment
Также обратите внимание на эту статью: sitebase.be/ (если вам нужен дизайн для доступной сети !! спасибо @Wim Mostmans) - person helle; 16.06.2021

Уловка CSS:

:focus { outline: none; }
person goker.cebeci    schedule 05.09.2010
comment
Важно учитывать проблемы удобства использования, как только вы отключаете встроенную функцию специальных возможностей в браузере. Я предлагаю создать свой собственный контурный фокус, например, желтый цвет фона. - person blagus; 20.03.2018

В Firefox 53.0, если я отключу контур одним из предложенных решений, Firefox отобразит вариант по умолчанию.

Однако, если я использую пустой цвет, он не обнаруживает, что контур скрыт:

input:focus{
   outline: 1px solid rgba(255,255,255,1);
}
person hsyl20    schedule 10.05.2017

:focus state - установите для свойства контура значение 0px, сплошная прозрачность;

person Mahendra Kulkarni    schedule 28.06.2016

$(function() {
     $('a').click(function() { $(this).blur(); });
     $('input').click(function() { $(this).blur(); });
});

Не используйте CSS для отключения фокуса: http://outlinenone.com/ Используйте другие пользователи.

person slva2000    schedule 24.09.2018
comment
почему мне не использовать css? Я вижу смысл в вашей ссылке, но предлагаемое вами решение полностью испортит графический интерфейс, и вы не сможете получить доступ к полям. - person helle; 24.09.2018

Используя jQuery, вы можете сделать

$("#nav li a").focus(function(){
  $(this).blur();
});
person Boris Delormas    schedule 10.06.2010
comment
с размытием я теряю фокус, не так ли? поэтому я не могу связать событие нажатия клавиши, а также колесо мыши ... - person helle; 10.06.2010
comment
Правильно, не понял всего вопроса;) - person Boris Delormas; 10.06.2010