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

入力ボックスのコンテンツプロンプトと非表示機能を実装する 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript 入力ボックスのファジープロンプト機能の実装
  • JSは、入力ボックスのプロンプトテキストをクリック時に消す効果を実現します。
  • JavaScriptで情報を出力する方法(情報確認ボックス-プロンプト入力ボックス-ドキュメントフロー出力)
  • ネイティブjsはパスワード入力ボックスの値の表示と非表示を実現します
  • JavaScript を使用して入力ボックスをアクティブにした後、初期コンテンツを非表示にする

<<:  Dockerコンテナのデータボリュームの詳細な説明

>>:  Manjaro インストール CUDA 実装チュートリアル分析

推薦する

JS 手ぶれ補正機能の実装と使用シナリオ

目次1. 手ぶれ補正機能とは何ですか? 1. なぜ手ぶれ補正機能が必要なのでしょうか? 2. 手ぶれ...

Nginx+SSL による双方向認証を実装するためのサンプル コード

まずディレクトリを作成する cd /etc/nginx mkdir ssl cd ssl CA と自...

nginx+lua を使用した単一マシンでの何万もの同時接続の実装

nginx は弊社で最もよく使用されるサーバーで、コンテンツ配信やリバース プロキシによく使用されま...

HTML テキストフォーマットの簡単な例 (詳細な説明)

1. テキストの書式設定: この例では、HTML ファイル内のテキストを書式設定する方法を示します...

Vue での keepAlive の使用例の詳細な説明

開発においては、一覧から詳細ページにジャンプし、また詳細ページに戻る際に一覧ページの状態(スクロール...

nginx 503 サービスが一時的に利用できない問題を解決する方法

最近、ウェブサイトを更新すると、503 Service Temporarily Unavailabl...

カレンダー効果を実現するJavaScript

この記事では、カレンダー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...

Vueは要素ツリーコントロールを通じてツリーテーブルを実装します

目次実装効果図依存関係をインストールするカスタムツリーコントロールその他の実装要約するVueでは、要...

MySQL 8.0.15 のインストールと設定方法のグラフィックチュートリアル (Win10 Home バージョン 64)

超初心者の私は、MySQL を学び始めたばかりで、インストール プロセス中に多くの問題に遭遇しました...

Dockerコンテナの原理の分析

目次01 コンテナの本質とは何か? 02 Cgroupテクノロジーと名前空間テクノロジーの概要03 ...

nginx ウェブサイト サービスのアンチホットリンクを設定する方法 (推奨)

1. ホットリンクの原則1.1 Webページの準備Web ソース ホスト (192.168.153...

Vue プロジェクトをパッケージ化して Apache サーバーにデプロイする手順

開発環境では、vue プロジェクトは、ローカルで Express サーバーを構築することをベースにし...

Dockerコンテナを閉じずに終了する方法の詳細な説明

Docker コンテナに入った後、コンテナを終了すると、コンテナは Exited 状態に変わります。...

ウェブページの HTML コード: スクロールテキストの作成

このセクションでは、Web ページ内のテキストをスクロールしたり、スクロール プロパティを制御できる...