入力ボックスが小さい場合、内容を入力した後に、入力内容が拡大されたプロンプト ボックスを表示したいことがあります。 実装のアイデア
これはキーボードのリリース イベントであることに注意してください。キーボードのプレス イベント (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> ページ効果: これで、JavaScript を使用して入力ボックス コンテンツ プロンプトと非表示機能を実装する方法に関するこの記事は終了です。関連する js 入力ボックス コンテンツ プロンプトと非表示コンテンツの詳細については、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: Manjaro インストール CUDA 実装チュートリアル分析
Docker パッケージは、デフォルトの CentOS-Extras リポジトリにすでに含まれていま...
この記事では、ネイティブ JS で実装されたブラインドの特殊効果を紹介します。効果は次のとおりです。...
2 年生から、これらのインストールと設定の仕方を尋ねられました。簡単なチュートリアルを作成し、ここ...
mysql データベースには student テーブルがあり、その構造は次のとおりです。 Oracl...
この記事では、ショッピングカートを実装するためのJavaScriptの具体的なコードを参考までに紹介...
まずdockerコンテナを実行しますルートユーザーとしてコマンドを実行する sudo docker ...
オプションに属性 selected = "selected" を追加すると、それ...
モバイル アプリを開発する場合、Web サイトが特定の高さまでスクロールしたときにコンテンツの一部を...
yum を使用してすべての依存関係を一緒にインストールできますが、–downloadonly –d...
Raspberry Pi 3B に 64 ビット アプリケーション (64 ビット JDK など) ...
通常、プロジェクト開発では、マージン、位置、座標などを扱う必要があります。悲劇なのは、これらの概念が...
目次HTML ページの作成js部分の機能を実装する1. 左ボタンと右ボタン2. 小さな円を動的に生成...
序文この記事では主に、SQL ステートメントの最適化の一般的な手順について説明します。これは、参考と...
目次tf-gpu をダウンロード取得したtf-gpuイメージに基づいて独自のイメージを構築するイメー...
1. データベース トランザクションによりデータベースのパフォーマンスが低下します。データの一貫性と...