Как убрать фокус с кнопок при нажатии

106

У моих кнопок есть подсветка вокруг них после нажатия на них. Это находится в Chrome.

Изображение 129Изображение 130

<button class="btn btn-primary btn-block">
    <span class="icon-plus"></span> Add Page
</button>

Я использую Bootstrap с темой, но я уверен, что не это: я замечал это раньше в другом проекте.

Это исчезает, если я использую тег <a> вместо <button>. Зачем? Если бы я хотел использовать <button>, как бы я его убрал?

  • 12
    контур: 0; может вас заинтересовать
  • 0
    Любой класс добавляется после клика?
Показать ещё 6 комментариев
Теги:

20 ответов

165
Лучший ответ

Я нашел эти Q и A на другой странице, и переопределение стиля фокуса кнопки сработало для меня. Эта проблема может быть специфичной для MacOS с Chrome.

.btn:focus {
  outline: none;
}

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

Поделиться
  • 23
    Я тоже думал об этом, но разве удаление контура не имеет проблем с доступностью?
  • 9
    Я думаю, у нас нет другого выбора. Вы также можете добавить .btn:active:focus , чтобы удалить его из активного состояния.
Показать ещё 3 комментария
53

Вам нужно что-то вроде:

<button class="btn btn-primary btn-block" onclick="this.blur();">...

Метод .blur() корректно удаляет выделение фокуса и не путает стили Bootstraps.

Поделиться
  • 3
    Это отображает план на короткий момент, который все еще разрушает его: /
  • 2
    Я не вижу мерцания, если я запускаю событие фокуса вместо события щелчка.
Показать ещё 4 комментария
24

Не могу поверить, что никто еще не опубликовал это.

Используйте ярлык вместо кнопки.

<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>

Fiddle

Поделиться
  • 5
    Это прекрасно работает для большинства пользователей, но этот метод не подходит для программ чтения с экрана или клавиатур и оставит незрячих пользователей и пользователей с ослабленной моторикой неспособными взаимодействовать с кнопкой.
  • 10
    У них нет, потому что это не семантически правильно :)
Показать ещё 6 комментариев
21

Хотя легко просто удалить схему для всех сфокусированных кнопок (как в user1933897 answer), но это решение плохо с точки зрения доступности (например, см. Остановить передачу сообщений с помощью фонового фокуса браузера по умолчанию)

С другой стороны, вероятно, невозможно убедить ваш браузер прекратить стилизацию нажатой кнопки, если она сфокусирована, если она думает, что она сфокусировалась после нажатия на нее (я смотрю на вас, Chrome на OS X).

Итак, что мы можем сделать? Мне приходят в голову пара вариантов.

1) Javascript (jQuery): $('.btn').mouseup(function() { this.blur() })

Вы поручаете вашему браузеру удалить фокус вокруг любой кнопки сразу после, нажатие кнопки. Используя mouseup вместо click, мы сохраняем поведение по умолчанию для взаимодействий на основе клавиатуры (mouseup не запускается клавиатурой).

2) CSS: .btn:hover { outline: 0 !important }

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

Поделиться
  • 4
    Число 1 - полезный совет. Он отключит фокусировку, когда кнопка не нажата, однако он будет отображаться, пока она нажата. Я отключил фокус на выбранном активном элементе с помощью :active:focus {outline:none;} .
  • 0
    Сокращенные функции, которые связывают прослушиватели событий, в jQuery устарели, поэтому лучше использовать .on('mouseup', function() { ... }) вместо .mouseup()
11

Я понимаю, что фокус сначала применяется после события onMouseDown, поэтому вызов e.preventDefault() в onMouseDown может быть чистым решением в зависимости от ваших потребностей. Это, безусловно, удобное для доступа решение, но, очевидно, оно регулирует поведение щелчков мыши, которые могут быть несовместимы с вашим веб-проектом.

В настоящее время я использую это решение (в рамках проекта react-bootstrap), и я не получаю фокус мерцания или удерживания фокуса кнопок после щелчка, но я все еще могу включить мой фокус и визуально визуализировать фокус те же кнопки.

Поделиться
  • 1
    Да. Ваше решение работает. Спасибо за чаевые. Вот скрипка для решения. Но это требует, чтобы обработчик JavaScript был присоединен к каждой кнопке. Было бы здорово, если бы мы могли достичь этого только с помощью CSS-решения.
  • 1
    Я думаю, что люди ожидают, что внимание будет сосредоточено на элементе, когда вы нажмете на него, и это решение предотвращает это. Я часто нажимаю на элемент и затем удаляюсь перед тем, как отпустить мышь, чтобы сфокусировать его, чтобы потом можно было вкладывать.
Показать ещё 4 комментария
6

Если вы используете правило :focus { outline: none; } для удаления контуров, ссылка или управление будут фокусируемыми, но без указания фокуса для пользователей клавиатуры. Способы его удаления с помощью JS, например, onfocus="blur()", еще хуже, и пользователь клавиатуры не сможет взаимодействовать с элементом управления.

Используемые хаки, которые вид OK, включают добавление правил :focus { outline: none; }, когда пользователи взаимодействуют с мышью и удаляют их снова, если обнаружено взаимодействие с клавиатурой. Линдсей Эванс сделал для этого lib: https://github.com/lindsayevans/outline.js

Но я бы предпочел установить класс в теге html или body. И иметь контроль в файле CSS, когда использовать это.

Например (встроенные обработчики событий предназначены только для демонстрации):

<html>
<head>
<style>
  a:focus, button:focus {
    outline: 3px solid #000;
  }
  .no-focus a, .no-focus button {
    outline: none;
  } 
</style>
</head>
<body id="thebody" 
onmousedown="document.getElementById('thebody').classList.add('no-focus');"
onkeydown="document.getElementById('thebody').classList.remove('no-focus');">
    <p>This her is <a href="#">a link</a></p>   
    <button>Click me</button>
</body>
</html>

Я поставил togheter a Pen: http://codepen.io/snobojohan/pen/RWXXmp

Но будьте осторожны, есть проблемы с производительностью. Это заставляет перекрашивать каждый раз, когда пользователь переключается между мышью и клавиатурой. Подробнее об устранении ненужных красок http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/

Поделиться
6

Я заметил то же самое, и хотя это меня действительно раздражает, я считаю, что нет правильного способа справиться с этим.

Я бы рекомендовал использовать все остальные решения, потому что они полностью уничтожают доступность кнопки, поэтому теперь, когда вы нажимаете кнопку, вы не получите ожидаемого фокуса.

Этого следует избегать!

.btn:focus {
  outline: none;
}
Поделиться
  • 0
    Я не думаю, что это неправильно, потому что у вас все еще есть немного различная молния на кнопке, когда сфокусировано, так что даже пользователи клавиатуры все еще могут это распознать. Но этого не достаточно, потому что вы все равно получите рамку рамки, когда будете нажимать и удерживать левую кнопку мыши
2

Поздно, но кто знает, что это может кому-то помочь. CSS будет выглядеть так:

.rhighlight{
   outline: none !important;
   box-shadow:none
}

HTML будет выглядеть так:

<button type="button" class="btn btn-primary rHighlight">Text</button>

Таким образом вы можете сохранить btn и связанные с ним поведения.

Поделиться
  • 0
    element:focus { box-shadow: none; } удален синий контур / тень.
2

Я упомянул об этом в комментарии выше, но для ясности это нужно перечислять как отдельный ответ. Пока вам не нужно фокусироваться на кнопке, вы можете использовать фокусное событие, чтобы удалить его, прежде чем он сможет применить любые эффекты CSS:

$('buttonSelector').focus(function(event) {
    event.target.blur();
});

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

Поделиться
  • 0
    Это сделало половину уловки для меня. Я использую React и React-Bootstrap. После щелчка кнопка оставалась подсвеченной вокруг этого. Добавление e.target.blur (); убирает свечение, но кнопка остается другого цвета.
  • 0
    Это также помогло мне. Благодарю.
1

Это работа, я надеюсь помочь вам.

.btn:focus, .btn:focus:active {
    outline: none;
}
Поделиться
  • 0
    .btn: у фокуса должен быть план для доступности (при табуляции)
1

Попробуйте это решение для удаления рамки вокруг кнопки. Добавьте этот код в css.

Попробуйте

button:focus{
outline:0px;
}

Если не работает, используйте ниже.

button:focus{
 outline:none !important;
 }
Поделиться
1

У нас была аналогичная проблема, и мы заметили, что Bootstrap 3 не имеет проблемы на их вкладках (в Chrome). Похоже, что они используют outline-style, что позволяет браузеру решать, что лучше делать, и Chrome, похоже, делает то, что вы хотите: покажите если вы просто нажали на элемент.

Поддержка outline-style трудно настроить, так как браузер принимает решение о том, что это значит. Лучше всего проверить несколько браузеров и иметь правило возврата.

Поделиться
1

Стиль

.not-focusable:focus {
    outline: none;
    box-shadow: none;
}

Использование

<button class="btn btn-primary not-focusable">My Button</button>
Поделиться
  • 0
    Чем это решение отличается от других ответов?
  • 2
    Есть только одно небольшое отличие - вы можете убрать фокус для нужных элементов, указав класс «не-фокусируемый», не переопределяя поведение всех кнопок, ссылок и т. Д.
Показать ещё 1 комментарий
1

Если вышеуказанное не работает для вас, попробуйте следующее:

.btn: focus {outline: none; box-shadow: none; border: 2px solid прозрачный;}

Как указал user1933897, это может быть специфично для MacOS с Chrome.

Поделиться
  • 0
    Тем не менее это справедливо при использовании bootstrap 4.0 - в Windows
0

Это сработало для меня. Я создал специальный класс, который переопределяет необходимый CSS.

.custom-button:focus {
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

Изображение 2392

-webkit-box-shadow будет работать для браузеров Chrome и Safari.

Поделиться
  • 0
    работает для меня, но мне пришлось убрать border: none !important; для кнопки, чтобы сохранить те же размеры
0

Это работает для меня, другое решение не упомянуто. Просто бросьте его в событие click...

$(this).trigger("blur");

Или вызвать его из другого события/метода...

$(".btn_name").trigger("blur");
Поделиться
  • 0
    Это сработало для меня
0

Если вам не нужен контур для кнопки со всем статусом, вы можете переопределить css с помощью кода ниже

.btn.active.focus, .btn.active:focus, 
.btn.focus, .btn:active.focus, 
.btn:active:focus, .btn:focus{
  outline: none;
}
Поделиться
0

Другим возможным решением является добавление класса с помощью Javascript-прослушивателя, когда пользователь нажимает на кнопку, а затем удаляет этот класс в фокусе с другим слушателем. Это поддерживает доступность (видимая вкладка), а также предотвращает необычное поведение Chrome при выборе кнопки, сфокусированной при нажатии.

JS:

$('button').click(function(){
    $(this).addClass('clicked');
});
$('button').focus(function(){
    $(this).removeClass('clicked');
});

CSS

button:focus {
    outline: 1px dotted #000;
}
button.clicked {
    outline: none;
}

Полный пример: https://jsfiddle.net/4bbb37fh/

Поделиться
  • 0
    Используйте mouseDown вместо клика. При щелчке контур появляется, пока мышь нажимается (не отпуская ее) в исходное состояние.
0

У меня была такая же проблема в MacOS и Chrome, когда вы использовали кнопку для запуска события перехода. Если кто-либо читает это, уже использует прослушиватель событий, вы можете решить его, вызвав .blur() после ваших действий.

Пример:

 nextQuestionButtonEl.click(function(){
    if (isQuestionAnswered()) {
        currentQuestion++;
        changeQuestion();
    } else {
        toggleNotification("invalidForm");
    }
    this.blur();
});

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

Поделиться
0

Просто добавьте outline:0; css к элементам.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню