Создание кнопки очистки внутри поля ввода: jQuery и CSS

Быстрый ответ

Чтобы создать кликабельную иконку, удаляющую текст из текстового поля одним нажатием, вам потребуются HTML, CSS и немного JavaScript. Вот пример кода, от которого можно оттолкнуться:

<div style="position:relative;">
  <input type="text" id="myInput" style="padding-right: 30px;" placeholder="Введите текст">
  <span onclick="myInput.value='';" 
        style="position:absolute;right:10px;top:0;bottom:0;height:20px;margin:auto;cursor:pointer;">&#x274C;</span>
</div>

В этом коде красный крестик является кнопкой, которая одним кликом освобождает текстовое поле от текста.

Подробные решения и хитрости

Отступы и позиционирование

Используйте padding-right, чтобы текст не перекрывал иконку:

/* Обеспечиваем пространство для иконки очистки */
input[type="text"] {
  padding-right: 30px; /* Размер подстраивается под нужды */
}

Для того чтобы иконка выглядела визуально приятно, её часто размещают в качестве фонового изображения. В качестве изображения можно использовать форматы base64 для сокращения количества HTTP-запросов.

Подробнее об этом расскажет наш спикер на видео

Взаимодействие пользователя – работа с иконкой очистки

Обработчики событий регистрируют клики и другие действия пользователя:

/* Иконка становится невидимой, если текстовое поле пустое */
document.getElementById('myInput').addEventListener('input', function() {
  var clearIcon = this.nextElementSibling;
  clearIcon.style.visibility = this.value ? 'visible' : 'hidden';
});

Плавность использования

CSS-переходы обеспечивают плавное появление и исчезновение иконки очистки:

/* Игра в прятки с иконкой: онa появляется, затем исчезает */
span {
  transition: visibility 0.2s, opacity 0.2s ease;
  opacity: 0;
}

input:not(:placeholder-shown) + span {
  opacity: 1;
  visibility: visible;
}

Альтернативные методы

HTML <input type="search">

<input type="search"> уже содержит встроенную кнопку сброса. Убедитесь в совместимости решения с различными браузерами.

jQuery и его плагины

С помощью jQuery можно легко управлять видимостью кнопки сброса:

/* Если текст есть, элемент появляется, если нет – исчезает */
$('#myInput').on('input', function() {
  $(this).next('span').toggle(Boolean($(this).val()));
});

Плагин jQuery-ClearSearch усовершенствовывает функциональность очистки.

Кнопка сброса в форме

Кнопка сброса (input[type="reset"]) в форме позволяет мгновенно очистить содержимое всех полей.

Псевдо-классы

С помощью псевдо-класса :invalid, можно сделать так, что иконка сброса будет появляться только при наличии валидного текста в поле.

Понимание пользователя

Анализ поведения пользователя, включая отслеживание движения курсора мыши, помогает улучшить UX текстового поля.

Визуализация

Можно представить, что текстовое поле – это баночка меда (🍯), а вводимый текст – это пчела (🐝). Клик по ❌ изгоняет пчелу, и баночка готова принять новое содержимое.

Поле с текстом    Иконка очистки    Поле после очистки
|        🍯        |       ❌      |        🍯        |
|       🐝🍯       |    клик       |        🍯        |

Путь к мастерству

Примеры кода: быстрый старт

Модифицируйте приведенные примеры кода так, чтобы они лучше соответствовали вашим потребностям и обеспечивали удобные UX.

Тестирование для исключения ошибок

Уверьтесь в корректности работы UX путем его тестирования. Это обеспечит положительные взаимодействия с пользователями и способствует формированию лояльной аудитории.

Изучение материалов от профессионалов

Получайте знания от авторитетов в данной сфере, таких как "Dive Into HTML5: A form of Madness", для развития своих навыков.

Интерактивные платформы

Пользуйтесь платформами типа JS Fiddle или CodePen для экспериментов с настройками кнопки очистки.

CSS классы и Data-атрибуты: магия в действии

Применяйте data-атрибуты и CSS-классы для систематизации работы. Это сделает ваш HTML-код аккуратнее, а JavaScript-код — проще.

Полезные материалы

1. <input>: The Input (Form Input) element – HTML: HyperText Markup Language | MDN — подробное описание элементов HTML <input>.
2. Styling Cross-Browser Compatible Range Inputs with CSS | CSS-Tricks — создание кроссбраузерных стилей для элементов ввода диапазона.
3. javascript – Clear icon inside input text – Stack Overflow — сообщество Stack Overflow предлагает различные решения для размещения иконки очистки в текстовых полях.
4. Inspiration for Text Input Effects | Codrops — различные методы для улучшения взаимодействия с пользователем при вводе текста.
5. The Perfect Date and Time Picker | Smashing Magazine — руководство по созданию идеального инструмента для выбора даты и времени.
6. Complete Guide to Data Attributes | CSS-Tricks — подробное руководство по использованию data-атрибутов в HTML и CSS.