HTML 統合されたエレガントなリアルタイム入力クリーニング function

HTML 統合されたエレガントなリアルタイム入力クリーニング機能

2024-07-12

導入

こんにちは、シャオゾウです。

最新の Web デザインでは、ユーザーエクスペリエンスが非常に重要です。スムーズで直観的で応答性の高いインターフェイスにより、ユーザーの満足度が大幅に向上します。この記事では、リアルタイム入力クリア機能を Web フォームに組み込む方法、つまり入力ボックスに「×」アイコンを表示して、ユーザーがワンクリックで入力ボックス内のテキストをクリアできるようにする方法を紹介します。 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 フォームに実用的で美しいリアルタイム入力クリア機能を簡単に実装できます。これにより、ユーザー操作の利便性が向上するだけでなく、全体的なユーザーエクスペリエンスも向上します。この記事が、Web サイトやアプリケーションのユーザーインターフェイスデザインの最適化に役立つことを願っています。

技術共有