Интегрированная в HTML элегантная функция очистки ввода в реальном времени function

Интегрированная в HTML элегантная функция очистки ввода в реальном времени.

2024-07-12

введение

Привет, я Сяо Цзоу.

Нажмите, чтобы посетить Мой личный блог

В современном веб-дизайне пользовательский опыт имеет решающее значение. Гладкий, интуитивно понятный и отзывчивый интерфейс может значительно повысить удовлетворенность пользователей. В этой статье будет рассказано, как интегрировать функцию очистки ввода в реальном времени в веб-форму, то есть отобразить значок «x» в поле ввода, позволяя пользователю очищать текст в поле ввода одним щелчком мыши. Мы будем использовать HTML, CSS и JavaScript для реализации этой функциональности, сохраняя при этом интерфейс простым и красивым.

визуализации

Вставьте сюда описание изображения

HTML-структура

Наш пример кода основан на стандартном поле ввода, и мы встроим четкий значок в правую часть поля ввода. Вот базовая структура HTML-кода:

<div class="field m-mobile-wide m-margin-bottom-small" style="padding-top: 10px">
    <div class="ui left icon input">
        <i class="qq icon"></i>
        <input type="text" id="QQ" name="qq" placeholder="输入QQ号自动获取昵称头像" required="required">
        <span class="clear-input" style="display: none;">
            <i class="fa fa-times-circle"></i>
        </span>
    </div>
</div>
1
2
3
4
5
6
7
8
9

Здесь мы используем<span>Элемент для переноса значка очистки, изначально установленныйdisplay: none;Сделайте это невидимым.

CSS-стили

Чтобы сделать четкий значок расположенным в правой части поля ввода, нам нужно использовать CSS для позиционирования и украшения значка. Вот CSS-код:

.clear-input {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: none; /* 默认隐藏 */
}
1
2
3
4
5
6
7
8

Этот код размещает значок очистки в правом верхнем углу поля ввода и передаетtransformСвойства центрированы по вертикали.

Логика JavaScript

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

document.addEventListener('DOMContentLoaded', function () {
    const inputs = document.querySelectorAll('.ui.left.icon.input input');
    const clearSpans = document.querySelectorAll('.ui.left.icon.input .clear-input');
    
    inputs.forEach((input, index) => {
        // 检查输入框是否非空，如果是，则显示清除图标
        if (input.value) {
            clearSpans[index].style.display = 'block';
        }
        
        // 当输入框内容改变时，显示或隐藏清除图标
        input.addEventListener('input', function () {
            if (this.value) {
                clearSpans[index].style.display = 'block';
            } else {
                clearSpans[index].style.display = 'none';
            }
        });
        
        // 当输入框获得焦点时，如果已有内容，显示清除图标
        input.addEventListener('focus', function () {
            if (this.value) {
                clearSpans[index].style.display = 'block';
            }
        });
        
        // 当输入框失去焦点且为空时，隐藏清除图标
        input.addEventListener('blur', function () {
            if (!this.value) {
                clearSpans[index].style.display = 'none';
            }
        });
        
        // 当点击清除图标时，清空输入框并隐藏图标
        clearSpans[index].addEventListener('click', function (event) {
            event.stopPropagation();
            input.value = '';
            clearSpans[index].style.display = 'none';
        });
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

Этот код слушаетinput、focusиblur Событие, которое показывает или скрывает значок очистки в зависимости от состояния поля ввода. При нажатии на значок очистки поле ввода очищается, а значок снова скрывается.

Подведем итог

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

Обмен технологиями