Блог

Главная - Вопросы по программированию - Пользовательская кнопка удаляет фокус при нажатии, но не при нажатии клавиши Enter

Пользовательская кнопка удаляет фокус при нажатии, но не при нажатии клавиши Enter

#javascript

#javascript

Вопрос:

Каков наилучший подход для удаления фокуса с кнопки при щелчке мышью, но не при Enter нажатии клавиши с использованием Javascript? Я использую этот blur() метод для click события, но это не работает.

Пожалуйста, обратите внимание, что я не могу использовать outline: none или outline: 0 по соображениям доступности. Для получения дополнительной информации обратитесь к: http://www.outlinenone.com /

 var button = document.getElementById("btn");
button.addEventListener("click", removeFocus);

function removeFocus(event) {
	event.target.blur();
}  
 button {
  display: inline-block;
  border: none;
  height: 36px;
  line-height:36px;
  padding: 0 12px;
  background: cyan;
}  
 <button id="btn">
  Hello
</button>

Комментарии:

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

2. я не думаю, что это точно. веб-сайт stackoverflow сам делает это. попробуйте щелкнуть по любому из элементов в заголовке stackoverflow, и вы не увидите никаких стилей контуров, и попробуйте использовать клавиатуру для навигации и щелчка, и вы увидите один.

Ответ №1:

Решение на Javascript

 var button = document.getElementById("btn");
button.addEventListener("click", clickEvent);
button.addEventListener("keypress", clickEvent);
function clickEvent(event){
  if (event.keyCode == 13) {
    event.preventDefault();
  } else {
    button.blur();
  }
}  
 button {
  display: inline-block;
  border: none;
  height: 36px;
  line-height:36px;
  padding: 0 12px;
  background: cyan;
}  
 <button id="btn">
  Hello
</button>