प्रौद्योगिकी साझेदारी

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

आमुख

नमस्कार, अहं Xiao Zou अस्मि।

भ्रमणार्थं क्लिक् कुर्वन्तु मम व्यक्तिगतः ब्लॉगः

आधुनिकजालनिर्माणे उपयोक्तृअनुभवः महत्त्वपूर्णः अस्ति । एकं सुचारु, सहजं, प्रतिक्रियाशीलं च अन्तरफलकं उपयोक्तृसन्तुष्टिं महत्त्वपूर्णतया वर्धयितुं शक्नोति । अस्मिन् लेखे जालरूपेण वास्तविकसमये निवेश-समाशोधन-कार्यं कथं एकीकृत्य, अर्थात् निवेश-पेटिकायां "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गुणाः लम्बकेन्द्रिताः भवन्ति ।

जावास्क्रिप्ट तर्कः

इनपुट् बॉक्स् मध्ये पाठः भवति चेत् clear चिह्नं प्रदर्शयितुं क्लिक् कृते पाठं च स्वच्छं कर्तुं अस्माभिः इवेण्ट् श्रोता योजयितुं 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 इवेण्ट् यत् इनपुट् बॉक्स् इत्यस्य स्थितिम् आधारीकृत्य स्पष्टं चिह्नं दर्शयति वा गोपयति वा । यदा clear चिह्नं क्लिक् भवति तदा इनपुट् पेटी स्वच्छं भवति तथा च चिह्नं पुनः गोपितं भवति ।

सारांशं कुरुत

उपर्युक्तपदार्थानाम् माध्यमेन वयं जालरूपेषु व्यावहारिकं सुन्दरं च वास्तविकसमयस्य इनपुट् क्लियरिंग् फंक्शन् सहजतया कार्यान्वितुं शक्नुमः । एतेन न केवलं उपयोक्तृ-अन्तर्क्रियायाः सुविधायां सुधारः भवति, अपितु समग्र-उपयोक्तृ-अनुभवः अपि वर्धते । आशासे यत् एषः लेखः भवतः वेबसाइट् अथवा अनुप्रयोगस्य उपयोक्तृ-अन्तरफलकस्य डिजाइनं अनुकूलितुं साहाय्यं करोति।