Partage de technologie

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

introduction

Bonjour, je suis Xiao Zou.

Cliquez pour visiter Mon blog personnel

Dans la conception Web moderne, l’expérience utilisateur est cruciale. Une interface fluide, intuitive et réactive peut augmenter considérablement la satisfaction des utilisateurs. Cet article présentera comment intégrer la fonction d'effacement des saisies en temps réel dans un formulaire Web, c'est-à-dire afficher une icône « x » dans la zone de saisie, permettant à l'utilisateur d'effacer le texte dans la zone de saisie en un seul clic. Nous utiliserons HTML, CSS et JavaScript pour implémenter cette fonctionnalité tout en gardant l'interface simple et belle.

rendus

Structure HTML

Notre exemple de code est basé sur une zone de saisie standard et nous intégrerons une icône claire sur le côté droit de la zone de saisie. Voici la structure de base du code 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

Ici, nous utilisons<span>Élément pour envelopper l'icône claire, initialement définidisplay: none;Rendez-le invisible.

Styles CSS

Afin de rendre l'icône claire située sur le côté droit de la zone de saisie, nous devons utiliser CSS pour positionner et embellir l'icône. Voici le code 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

Ce code positionne l'icône d'effacement dans le coin supérieur droit de la zone de saisie et transmettransformLes propriétés sont centrées verticalement.

Logique JavaScript

Pour que l'icône d'effacement s'affiche lorsqu'il y a du texte dans la zone de saisie et efface le texte lorsque vous cliquez dessus, nous devons utiliser JavaScript pour ajouter un écouteur d'événement. Voici le code 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

Ce code écouteinput、focusetblur Événement qui affiche ou masque l'icône d'effacement en fonction de l'état de la zone de saisie. Lorsque vous cliquez sur l'icône d'effacement, la zone de saisie est effacée et l'icône est à nouveau masquée.

Résumer

Grâce aux étapes ci-dessus, nous pouvons facilement implémenter une fonction pratique et esthétique de compensation des saisies en temps réel dans les formulaires Web. Cela améliore non seulement la commodité de l’interaction avec l’utilisateur, mais améliore également l’expérience utilisateur globale. J'espère que cet article vous aidera à optimiser la conception de l'interface utilisateur de votre site Web ou de votre application.