Berbagi teknologi

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

perkenalan

Halo, saya Xiao Zou.

Klik untuk mengunjungi Blog pribadi saya

Dalam desain web modern, pengalaman pengguna sangat penting. Antarmuka yang halus, intuitif, dan responsif dapat meningkatkan kepuasan pengguna secara signifikan. Artikel ini akan memperkenalkan cara mengintegrasikan fungsi pembersihan input real-time dalam formulir web, yaitu menampilkan ikon "x" di kotak input, memungkinkan pengguna untuk menghapus teks di kotak input dengan satu klik. Kami akan menggunakan HTML, CSS, dan JavaScript untuk mengimplementasikan fungsi ini sambil menjaga antarmuka tetap sederhana dan indah.

rendering

struktur HTML

Kode contoh kami didasarkan pada kotak masukan standar, dan kami akan menyematkan ikon yang jelas di sisi kanan kotak masukan. Berikut adalah struktur dasar kode 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

Di sini kami menggunakan<span>Elemen untuk membungkus ikon yang jelas, awalnya diseteldisplay: none;Jadikan itu tidak terlihat.

gaya CSS

Untuk membuat ikon jelas terletak di sisi kanan kotak input, kita perlu menggunakan CSS untuk memposisikan dan mempercantik ikon. Berikut kode CSSnya:

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

Kode ini menempatkan ikon jelas di sudut kanan atas kotak input dan melewatinyatransformProperti dipusatkan secara vertikal.

logika JavaScript

Agar ikon hapus ditampilkan ketika ada teks di kotak input dan menghapus teks ketika diklik, kita perlu menggunakan JavaScript untuk menambahkan pendengar acara. Berikut ini kode JavaScriptnya:

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

Kode ini mendengarkaninput、focusDanblur Acara yang menampilkan atau menyembunyikan ikon yang jelas berdasarkan keadaan kotak input. Ketika ikon hapus diklik, kotak input akan dihapus dan ikon disembunyikan lagi.

Meringkaskan

Melalui langkah-langkah di atas, kita dapat dengan mudah mengimplementasikan fungsi kliring input real-time yang praktis dan indah dalam formulir web. Hal ini tidak hanya meningkatkan kenyamanan interaksi pengguna, namun juga meningkatkan pengalaman pengguna secara keseluruhan. Saya harap artikel ini membantu Anda mengoptimalkan desain antarmuka pengguna situs web atau aplikasi Anda.