入力ボックスのコンテンツプロンプトと非表示機能を実装する 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 実装チュートリアル分析

推薦する

LinuxでのDockerのインストールチュートリアル

Docker パッケージは、デフォルトの CentOS-Extras リポジトリにすでに含まれていま...

ブラインドの特殊効果を実現するネイティブJS

この記事では、ネイティブ JS で実装されたブラインドの特殊効果を紹介します。効果は次のとおりです。...

VMware に CentOS7 をインストールし (静的 IP アドレスを設定)、Docker コンテナ経由で mySql データベースをインストールする (非常に詳細なチュートリアル)

2 年生から、これらのインストールと設定の仕方を尋ねられました。簡単なチュートリアルを作成し、ここ...

MySQLデータをOracleに移行する正しい方法

mysql データベースには student テーブルがあり、その構造は次のとおりです。 Oracl...

ネイティブ JavaScript でショッピングカートを実装する

この記事では、ショッピングカートを実装するためのJavaScriptの具体的なコードを参考までに紹介...

Dockerはコンテナに入るためにルートを使用する

まずdockerコンテナを実行しますルートユーザーとしてコマンドを実行する sudo docker ...

HTML Selectは、デフォルトの選択を設定するためにselected属性を使用します。

オプションに属性 selected = "selected" を追加すると、それ...

CSSの固定位置属性の詳細な説明

モバイル アプリを開発する場合、Web サイトが特定の高さまでスクロールしたときにコンテンツの一部を...

yum を使用して rpm と関連する依存関係をダウンロードして、docker をオフラインでインストールします。

yum を使用してすべての依存関係を一緒にインストールできますが、–downloadonly –d...

Raspberry Pi 3B+ に 64 ビット Ubuntu システムと Docker ツールをインストールする詳細な手順

Raspberry Pi 3B に 64 ビット アプリケーション (64 ビット JDK など) ...

ウィンドウ内のさまざまな距離/スクロール距離の正確な計算の概要

通常、プロジェクト開発では、マージン、位置、座標などを扱う必要があります。悲劇なのは、これらの概念が...

JavaScript による Web ページ カルーセルの超詳細な実装

目次HTML ページの作成js部分の機能を実装する1. 左ボタンと右ボタン2. 小さな円を動的に生成...

SQL文の最適化の一般的な手順の詳細な説明

序文この記事では主に、SQL ステートメントの最適化の一般的な手順について説明します。これは、参考と...

DockerでGPUを使用するプロセスの詳細な説明

目次tf-gpu をダウンロード取得したtf-gpuイメージに基づいて独自のイメージを構築するイメー...

MySQLトランザクションが効率に与える影響の分析と概要

1. データベース トランザクションによりデータベースのパフォーマンスが低下します。データの一貫性と...