HTML-integroitu tyylikäs reaaliaikainen syötteen puhdistus function

HTML-integroitu tyylikäs reaaliaikainen syötteen puhdistustoiminto

2024-07-12

esittely

Hei, olen Xiao Zou.

Napsauta vieraillaksesi Oma henkilökohtainen blogini

Nykyaikaisessa web-suunnittelussa käyttökokemus on ratkaisevan tärkeää. Sujuva, intuitiivinen ja reagoiva käyttöliittymä voi merkittävästi lisätä käyttäjätyytyväisyyttä. Tässä artikkelissa kerrotaan, kuinka reaaliaikainen syötteiden tyhjennystoiminto integroidaan verkkolomakkeeseen, eli näytetään "x"-kuvake syöttökentässä, jolloin käyttäjä voi tyhjentää syöttöruudun tekstin yhdellä napsautuksella. Käytämme HTML-, CSS- ja JavaScriptiä toteuttaaksemme tämän toiminnon pitäen samalla käyttöliittymän yksinkertaisena ja kauniina.

renderöinnit

Lisää kuvan kuvaus tähän

HTML-rakenne

Esimerkkikoodimme perustuu tavalliseen syöttöruutuun, ja upotamme selkeän kuvakkeen syöttöruudun oikealle puolelle. Tässä on HTML-koodin perusrakenne:

<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

Täällä käytämme<span>Elementti, joka kääri selkeän kuvakkeen, alun perin asetettudisplay: none;Tee siitä näkymätön.

CSS-tyylejä

Jotta syöttöruudun oikealla puolella oleva kuvake olisi selkeä, meidän on käytettävä CSS:ää kuvakkeen sijoittamiseen ja kaunistamiseen. Tässä on CSS-koodi:

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

Tämä koodi sijoittaa selkeän kuvakkeen syöttöruudun oikeaan yläkulmaan ja kulkeetransformOminaisuudet on keskitetty pystysuunnassa.

JavaScript-logiikka

Jotta tyhjennyskuvake näkyy, kun syöttöruudussa on tekstiä, ja teksti tyhjenee napsautettuna, meidän on lisättävä tapahtumaseurain JavaScript-koodilla. Tässä on JavaScript-koodi:

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

Tämä koodi kuunteleeinput、focusjablur Tapahtuma, joka näyttää tai piilottaa tyhjentävän kuvakkeen syöttöruudun tilan perusteella. Kun tyhjennyskuvaketta napsautetaan, syöttöruutu tyhjennetään ja kuvake piilotetaan uudelleen.

Tee yhteenveto

Yllä olevien vaiheiden avulla voimme helposti toteuttaa käytännöllisen ja kauniin reaaliaikaisen syötteiden tyhjennystoiminnon verkkolomakkeissa. Tämä ei ainoastaan paranna käyttäjien vuorovaikutuksen mukavuutta, vaan parantaa myös yleistä käyttökokemusta. Toivon, että tämä artikkeli auttaa sinua optimoimaan verkkosivustosi tai sovelluksesi käyttöliittymäsuunnittelun.

Teknologian jakaminen