Получить профессию в Skypro
Отслеживание нажатия кнопки очистки в HTML5 Search Input
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Определить момент очистки поля поиска можно через отслеживание отсутствия значения value во время события input:
document.querySelector('input[type="search"]').addEventListener('input', (e) => {
if (!e.target.value) console.log('Поиск был очищен!');
});В данном случае обработчик событий наблюдает за изменениями в поле поиска и реагирует на его очистку.
Используем событие 'input' в своих интересах
Событие input используется для отслеживания действий пользователя при вводе:
let searchInput = document.querySelector('input[type=search]');
searchInput.addEventListener('input', (e) => {
if (!e.target.value) console.log('Поиск был очищен!');
});Браузерные различия
Поведение события search, срабатывающего при использовании кнопки очистки, отличается в разных браузерах. В Chrome оно работает отлично, однако Firefox и Safari могут вести себя непредсказуемо. Рассмотрим решение этой проблемы:
inputElement.addEventListener('search', function(evt) {
if (evt.target.value === '') {
console.log('Очистка поиска выполнена при помощи кнопки очистки');
}
});Debouncing: усмирение чрезмерно активного события ввода
Поиск в реальном времени может иногда слишком активно реагировать на ввод. Воспользуемся приемом debouncing для управления частотой реакции:
let debounceTimeout;
const debounce = (fn, delay) => {
return function() {
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(() => fn.apply(this, arguments), delay);
};
};
const handleInput = debounce(() => console.log('Поиск был изменен'), 250);
document.querySelector('input[type=search]').addEventListener('input', handleInput);Автозаполнение и сброс формы
Автозаполнение и сброс формы могут быть как удобными, так и неудобными, в зависимости от контекста. Вот как с ними работать:
form.addEventListener('reset', function() {
console.log('Форма была сброшена – поиск очищен');
});Отслеживание кнопки 'X'
Если стандартные методы не работают, вы можете попробовать разместить скрытую кнопку поверх вашей кнопки 'X' и отслеживать клики по ней:
<input type="search" id="searchInput"/>
<div onclick="detectClear()" style="position: absolute; right: 2px; top: 2px;"></div>Следите за тем, чтобы скрытая кнопка была неприметной и вписывалась в дизайн интерфейса.
Читаемость кода: вопрос вежливости или необходимости?
Хороший код — это продукт не только решения сложных задач, но и умения писать понятный и читаемый текст, который будет легко восприниматься и в дальнейшем:
function onSearchCleared() {
console.log('Поиск был очищен!');
}
document.getElementById('searchInput')
.addEventListener('input', (e) => {
if (!e.target.value) onSearchCleared();
});Взаимодействие с пользователем: не заставляйте меня думать!
Важен не только сам код, но и его взаимодействие с пользователем. Сделайте его удобным для очистки поля поиска:
let inputElement = document.querySelector('input[type="search"]');
inputElement.addEventListener('input', function(evt) {
if (evt.target.value === '') {
updateSearchStatus('Поиск очищен...');
}
});Визуализация
Перед очисткой:
🏖 – Поле Ввода – 🐾🐾🐾🐾🐾 (Следы поиска)После очистки:
🏖 – Поле Ввода – 🌊 (Волна смывает следы)inputElement.addEventListener('search', function(evt) {
if (!this.value) {
console.log('Поиск был очищен! 🌊');
}
});Акт очистки = Волна, которая смывает следы поиска.
ES6: возможности синтаксиса JavaScript
Расширьте возможности кода с помощью синтаксиса ES6:
const searchInput = document.querySelector('input[type=search]');
searchInput.addEventListener('input', ({currentTarget}) => {
if (!currentTarget.value) console.log('Поиск был очищен');
});
Надежность в любом браузере
Убедитесь, что код работает корректно во всех браузерах:
inputElement.addEventListener('input', function(evt) {
const isCleared = evt.target.value === '';
handleSearchInput(isCleared);
});
function handleSearchInput(cleared) {
if (cleared) {
console.log('Поиск был очищен во всех браузерах');
}
}