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

Вот несколько способов реализации поведения «очистить ввод в фокусе»:

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

// JavaScript
const inputField = document.getElementById('myInput');
inputField.addEventListener('focus', function() {
  this.value = '';
});
// jQuery
$(document).ready(function() {
  $('#myInput').on('focus', function() {
    $(this).val('');
  });
});

<старый старт="2">

Атрибут placeholderHTML5. В HTML5 вы можете использовать атрибут placeholderдля отображения временного текста в поле ввода. Текст-заполнитель автоматически исчезает, когда пользователь начинает печатать.

<input type="text" id="myInput" placeholder="Enter your text here">

3. CSS: вы можете использовать CSS для имитации поведения «очистить ввод при фокусе». Если установить прозрачный цвет фона поля ввода и применить фоновое изображение или значок, содержимое будет очищаться, когда поле получит фокус.

#myInput {
  background-color: transparent;
  background-image: url(clear-icon.png);
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 20px;
}