HTML integrierte elegante Echtzeit-Eingabereinigungsfunktion

HTML integrierte elegante Echtzeit-Eingabebereinigungsfunktion

2024-07-12

Einführung

Hallo, ich bin Xiao Zou.

Klicken Sie hier, um zu besuchen Mein persönlicher Blog

Im modernen Webdesign ist die Benutzererfahrung entscheidend. Eine reibungslose, intuitive und reaktionsfähige Benutzeroberfläche kann die Benutzerzufriedenheit erheblich steigern. In diesem Artikel wird erläutert, wie Sie die Funktion zum Löschen von Eingaben in Echtzeit in ein Webformular integrieren, d. h. ein „x“-Symbol im Eingabefeld anzeigen, sodass der Benutzer den Text im Eingabefeld mit einem Klick löschen kann. Wir werden HTML, CSS und JavaScript verwenden, um diese Funktionalität zu implementieren und gleichzeitig die Benutzeroberfläche einfach und schön zu halten.

Darstellungen

Fügen Sie hier eine Bildbeschreibung ein

HTML-Struktur

Unser Beispielcode basiert auf einem Standard-Eingabefeld und wir werden ein klares Symbol auf der rechten Seite des Eingabefelds einbetten. Hier ist die Grundstruktur des HTML-Codes:

<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

Hier verwenden wir<span>Element zum Umschließen des Klarsymbols, ursprünglich festgelegtdisplay: none;Machen Sie es unsichtbar.

CSS-Stile

Um das klare Symbol auf der rechten Seite des Eingabefelds anzuzeigen, müssen wir CSS verwenden, um das Symbol zu positionieren und zu verschönern. Hier ist der CSS-Code:

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

Dieser Code positioniert das Löschsymbol in der oberen rechten Ecke des Eingabefelds und wird übergebentransformEigenschaften sind vertikal zentriert.

JavaScript-Logik

Damit das Löschsymbol angezeigt wird, wenn Text im Eingabefeld vorhanden ist, und der Text gelöscht wird, wenn darauf geklickt wird, müssen wir JavaScript verwenden, um einen Ereignis-Listener hinzuzufügen. Hier ist der JavaScript-Code:

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

Dieser Code hört zuinput、focusUndblur Ereignis, das das Löschsymbol basierend auf dem Status des Eingabefelds ein- oder ausblendet. Durch Klicken auf das Löschsymbol wird das Eingabefeld geleert und das Symbol wieder ausgeblendet.

Zusammenfassen

Durch die oben genannten Schritte können wir ganz einfach eine praktische und schöne Funktion zum Löschen von Eingaben in Echtzeit in Webformularen implementieren. Dies verbessert nicht nur den Komfort der Benutzerinteraktion, sondern verbessert auch das gesamte Benutzererlebnis. Ich hoffe, dieser Artikel hilft Ihnen dabei, das Benutzeroberflächendesign Ihrer Website oder Anwendung zu optimieren.

Technologieaustausch