Как убрать выделение с input

Question

Есть элемент

 <input type="text">

При клике на него он обводится outline-ом и курсор устанавливается в этом input. Так вот, как без клика на другой элемент (например, body), сделать так, чтобы выделение с этого input "снялось", курсор перестал находиться в input и outline пропал? Короче: как убрать курсор из input-a без клика в свободном месте?

Answer 1

Используйте метод .blur():

(чтобы сработал снипет, поставьте каретку в поле и ждите 5 секунд)

setTimeout(()=>{
  document.querySelector('input').blur();
},5000);

<input>

Answer 2

const hoverBtn = document.querySelectorAll('.btn-hover');

hoverBtn.forEach((el) => el.addEventListener('mouseout', (e) => {
  document.activeElement.blur();
}));

body{ 
 background-color: #02a8b6;
} 

.btn-hover {   
  font-size: 28px;
  background-color: #302b34;
  outline: none; 
  border: none;
  transition: 0.1s;
}


.btn-hover:focus {
    outline: 1px solid #fff !important;
}

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button class='btn-hover'>Это наша кнопочка. Нажмите на нее и она подсветится.</button>
</body>
</html>

БЛОГ НА HUSL

Как убрать выделение с input

Ответы (2 шт):