0

Есть элемент

 <input type="text">

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

1
  • Используйте функцию blur()
    – ccxdec
    11 янв 2021 в 18:20

2 ответа 2

2

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

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

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

0

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.