Condivisione della tecnologia

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

introduzione

Ciao, sono Xiao Zou.

Fare clic per visitare Il mio blog personale

Nel web design moderno, l’esperienza dell’utente è fondamentale. Un'interfaccia fluida, intuitiva e reattiva può aumentare significativamente la soddisfazione dell'utente. Questo articolo introdurrà come integrare la funzione di cancellazione dell'input in tempo reale in un modulo web, ovvero visualizzare un'icona "x" nella casella di input, consentendo all'utente di cancellare il testo nella casella di input con un clic. Utilizzeremo HTML, CSS e JavaScript per implementare questa funzionalità mantenendo l'interfaccia semplice e bella.

rendering

Struttura HTML

Il nostro codice di esempio si basa su una casella di input standard e incorporeremo un'icona chiara sul lato destro della casella di input. Ecco la struttura di base del codice 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

Qui usiamo<span>Elemento per racchiudere l'icona cancella, impostato inizialmentedisplay: none;Rendilo invisibile.

Stili CSS

Per rendere chiara l'icona situata sul lato destro della casella di input, dobbiamo utilizzare i CSS per posizionare e abbellire l'icona. Ecco il codice 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

Questo codice posiziona l'icona Cancella nell'angolo in alto a destra della casella di input e passatransformLe proprietà sono centrate verticalmente.

Logica JavaScript

Affinché l'icona di cancellazione venga visualizzata quando è presente del testo nella casella di input e cancelli il testo quando si fa clic, dobbiamo utilizzare JavaScript per aggiungere un ascoltatore di eventi. Ecco il codice 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

Questo codice ascoltainput、focusEblur Evento che mostra o nasconde l'icona di cancellazione in base allo stato della casella di input. Quando si fa clic sull'icona Cancella, la casella di input viene cancellata e l'icona viene nuovamente nascosta.

Riassumere

Attraverso i passaggi precedenti, possiamo facilmente implementare una pratica e bella funzione di cancellazione degli input in tempo reale nei moduli web. Ciò non solo migliora la comodità dell'interazione dell'utente, ma migliora anche l'esperienza complessiva dell'utente. Spero che questo articolo ti aiuti a ottimizzare il design dell'interfaccia utente del tuo sito web o della tua applicazione.