Убрать/добавить focus?

Question

[linkkkkkkkkkkk]

Как при нажатии на кнопку добавить focus элементу, а при повторном нажатии убрать его?

Comments

[Rustam Bainazarov]

Зачем, когда вы ломаете функционал focus'а? Лучше скажите, какой цели вы хотите достичь, что вам потребовалось задуматься об уничтожении focus'а?

Answer 1

[Иван]

Можно сделать отдельный класс со стилем фокуса, с помощью JS тоглить его.

HTML:
<input class='red' type="text">

CSS:

input {
  outline: none;
}

.red {
  border-color: red;
}

.green {
  border-color: green;
  outline: green;
}

JavaScript:

const input = document.querySelector('input');
input.addEventListener('click', () => {
  input.classList.toggle('green')
  if (!input.classList.contains('green')) {
     input.blur();
     }
  
});

input.addEventListener('blur', () => {
  input.classList.remove('green')
});