Κοινή χρήση τεχνολογίας

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

εισαγωγή

Γεια σας, είμαι ο Xiao Zou.

Κάντε κλικ για επίσκεψη Το προσωπικό μου blog

Στο σύγχρονο σχεδιασμό ιστοσελίδων, η εμπειρία χρήστη είναι ζωτικής σημασίας. Μια ομαλή, διαισθητική και αποκριτική διεπαφή μπορεί να αυξήσει σημαντικά την ικανοποίηση των χρηστών. Αυτό το άρθρο θα εισαγάγει τον τρόπο ενσωμάτωσης της συνάρτησης εκκαθάρισης εισόδου σε πραγματικό χρόνο σε μια φόρμα web, δηλαδή την εμφάνιση ενός εικονιδίου "x" στο πλαίσιο εισαγωγής, επιτρέποντας στον χρήστη να διαγράψει το κείμενο στο πλαίσιο εισαγωγής με ένα κλικ. Θα χρησιμοποιήσουμε HTML, CSS και JavaScript για την υλοποίηση αυτής της λειτουργικότητας, διατηρώντας παράλληλα τη διεπαφή απλή και όμορφη.

αποδόσεις

Δομή HTML

Το δείγμα κώδικα μας βασίζεται σε ένα τυπικό πλαίσιο εισαγωγής και θα ενσωματώσουμε ένα καθαρό εικονίδιο στη δεξιά πλευρά του πλαισίου εισαγωγής. Εδώ είναι η βασική δομή του κώδικα 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

Εδώ χρησιμοποιούμε<span>Στοιχείο για την αναδίπλωση του καθαρού εικονιδίου, που αρχικά ορίστηκεdisplay: none;Κάντε το αόρατο.

Στυλ CSS

Για να δημιουργήσουμε το σαφές εικονίδιο που βρίσκεται στη δεξιά πλευρά του πλαισίου εισαγωγής, πρέπει να χρησιμοποιήσουμε CSS για να τοποθετήσουμε και να ωραιοποιήσουμε το εικονίδιο. Εδώ είναι ο κώδικας 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

Αυτός ο κωδικός τοποθετεί το εικονίδιο διαγραφής στην επάνω δεξιά γωνία του πλαισίου εισαγωγής και περνάειtransformΟι ιδιότητες είναι κάθετα κεντραρισμένες.

Λογική JavaScript

Για να εμφανίζεται το εικονίδιο διαγραφής όταν υπάρχει κείμενο στο πλαίσιο εισαγωγής και να διαγράφεται το κείμενο όταν γίνεται κλικ, πρέπει να χρησιμοποιήσουμε JavaScript για να προσθέσουμε ένα πρόγραμμα ακρόασης συμβάντων. Εδώ είναι ο κώδικας 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

Αυτός ο κώδικας ακούειinput、focusκαιblur Συμβάν που εμφανίζει ή αποκρύπτει το καθαρό εικονίδιο με βάση την κατάσταση του πλαισίου εισαγωγής. Όταν κάνετε κλικ στο εικονίδιο διαγραφής, το πλαίσιο εισαγωγής διαγράφεται και το εικονίδιο κρύβεται ξανά.

Συνοψίζω

Μέσα από τα παραπάνω βήματα, μπορούμε εύκολα να εφαρμόσουμε μια πρακτική και όμορφη λειτουργία εκκαθάρισης εισόδου σε πραγματικό χρόνο σε φόρμες web. Αυτό όχι μόνο βελτιώνει την ευκολία της αλληλεπίδρασης με τον χρήστη, αλλά βελτιώνει επίσης τη συνολική εμπειρία χρήστη. Ελπίζω αυτό το άρθρο να σας βοηθήσει να βελτιστοποιήσετε τη σχεδίαση της διεπαφής χρήστη του ιστότοπου ή της εφαρμογής σας.