入力ボックスのコンテンツプロンプトと非表示機能を実装する JavaScript

入力ボックスが小さい場合、内容を入力した後に、入力内容が拡大されたプロンプトボックスを表示したいことがあります。

実装のアイデア

まずページにプロンプトボックスを記述し、プロンプトボックスのCSSプロパティをdisplayに設定して非表示にします。
入力ボックス要素オブジェクトと情報プロンプトボックス要素オブジェクトを取得します。
入力ボックス要素オブジェクトにキーボードイベントをバインドします - - -keyup、
イベントハンドラ: 入力内容が空かどうかを判断します。空でない場合は、入力ボックスの内容を情報プロンプトボックスに割り当て、情報プロンプトボックスの表示を設定します。表示はブロックに設定されています。空の場合は、プロンプトボックスを表示しないように設定します。
フォーカス獲得イベントとフォーカス喪失イベントを追加します。
ぼかし - - フォーカスが失われました: マウスが入力ボックスを選択しておらず、入力ボックス内でカーソルが点滅していない場合、情報プロンプトボックスは表示されません: 表示はなしに設定されています
フォーカス - フォーカスを取得します。マウスが入力ボックスをクリックし、入力ボックス内でカーソルが点滅すると、入力ボックスにコンテンツがあるかどうかが判断され、情報プロンプトボックスが表示されます。

これはキーボードのリリースイベントであることに注意してください。キーボードのプレスイベント (keydown または keypress) は使用しないでください。入力した単語は、キーボードが押されたときには入力されません。入力した単語は、キーボードがリリースされたときにのみ入力されます。

コード例:

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>JD Express 追跡番号クエリのシミュレーション</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }
        
        入力{
            アウトラインスタイル: なし;
        }
        
        。検索 {
            位置: 相対的;
            幅: 220ピクセル;
            マージン: 100px 自動;
        }
        
        。情報 {
            表示: なし;
            位置: 絶対;
            上: -40px;
            左: 0;
            幅: 170ピクセル;
            パディング: 5px 0;
            フォントサイズ: 18px;
            行の高さ: 20px;
            境界線: 1px実線 rgba(0, 0, 0, .2);
            ボックスの影: 0px 2px 4px rgba(0, 0, 0, .2);
        }
        
        .info::before {
            コンテンツ： '';
            幅: 0;
            高さ: 0;
            位置: 絶対;
            上: 28px;
            左: 18px;
            境界線: 8px 実線 #000;
            境界線の色: #fff 透明 透明;
            境界線のスタイル: 実線 破線 破線;
        }
    </スタイル>
</head>

<本文>
    <div class="検索">
        <div class="info">(*´▽｀)ノノ</div>
        <input type="text" class="express" placeholder="照会したいエクスプレス番号を入力してください">
        <input type="button" value="クエリ">
    </div>
    <スクリプト>
        var expressNo = document.querySelector('.express');
        var info = document.querySelector('.info');


        expressNo.addEventListener('keyup', 関数() {
            console.log(expressNo.値);
            コンソールログ(info.innerHTML);
            if (this.value == '') {
                info.style.display = 'なし';
            } それ以外 {
                info.style.display = 'ブロック';
                info.innerHTML = this.value;
            }
        });


        // フォーカスを失い、ボックスを非表示にします expressNo.addEventListener('blur', function() {
            info.style.display = 'なし';
        })

        //フォーカスイベントを取得してボックスを表示する expressNo.addEventListener('focus', function() {
            if (this.value !== '') {
                info.style.display = 'ブロック';
            }
        })
    </スクリプト>
</本文>

</html>

ページ効果:

エクスプレス追跡番号クエリ.gif

これで、JavaScript を使用して入力ボックスコンテンツプロンプトと非表示機能を実装する方法に関するこの記事は終了です。関連する js 入力ボックスコンテンツプロンプトと非表示コンテンツの詳細については、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: