HTML integratum elegans real-time input purgatio function

HTML integratum elegans input purgatio functionis real-time

2024-07-12

introductio

Salve, ego sum Xiao Zou.

In moderno consilio interretiali experientia usoris crucialus est. Lenis, intuitiva et responsiva interface signanter satisfactionem user augere potest. Articulus hic introducet quomodo ad solutionem functionis in forma interretiali real-time inputatur, id est iconem "x" in arca inputationis exhibebit, permittens utentem ad purgandum textum in input archa cum uno clic. Utemur HTML, CSS et JavaScript ad efficiendum hanc functionem, dum interfaciem simplicem et pulchram servamus.

reddituum

Insert imaginem descriptionis hic

HTML structure

Exemplar nostrum codicem in archa inputationis vexillum fundatur, et iconem claram in dextra parte initus arcae inseremus. Hic est structura fundamentalis codicis 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

Hic utimur<span>Elementum ad iconem claram involvere, initio ponedisplay: none;Fac invisibilis.

CSS styles

Ad manifestam iconem in dextra parte input cistae positam, opus est CSS positione uti et iconem ornare. Hic est 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

Hoc signum iconem in dextro angulo dextro initus arcae et transitum locattransformPossessiones perpendiculariter conversae sunt.

JavaScript logic

Ut iconem claram exhibeas cum textus in input archa inest et textum cum premendo purgandum, opus est ut JavaScript ad eventum auditoris adde. Hic est 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

Hoc codice auditinput、focusetblur Eventus qui ostendit vel abscondit iconem claram secundum statum in input buxum. Cum clara icon strepitatur, arca inputationis aperitur et icon iterum latet.

Summatim

Per gradus superiores facile efficere possumus munus practicum et pulchrum reale tempus inputare purgationem in formis interretialibus. Hoc non solum commodum commercii usoris amplificat, sed etiam altiorem experientiam usoris auget. Spero articulum hunc adiuvat te optimize consilium usoris interfaceti tui website vel applicationis.

Technology sharing