一般的なフォーム プロンプトは常にフォームのスペースを占有し、フォームが長くなったり広くなったりしてレイアウトに影響しますが、プロンプト ボックスをダイアログ ボックスのように必要なコンテンツの横にフロート表示すれば、この問題は解決できます。 HTMLとスタイル まずフォームを作る <div id="フォームブロック"> <h1>登録</h1> <フォームid="フォームフォーム" クラス="センターブロック"> <div> <input id="email" class="form-control" placeholder="メールアドレス"> </div> <div> <input id="vrf" class="form-control" placeholder="検証コード"> </フォーム> </div> </div> 次にダイアログボックスを設計する必要があります だいたいこんな感じです。三角形と長方形で構成されています。 #ヒント{ パディング上部: 6px; zインデックス: 9999; /*会話が他の要素に邪魔されないように上部に固定します*/ 位置: 固定; 幅: 1000ピクセル; } #フォームのヒント{ 背景色: 黒; 色: #ffffff; パディング: 0 6px; 位置: 絶対; } #三角形{ 境界線:10px実線; border-color: 透明 黒 透明 透明; } <div id="変更"> <label id="三角形"></label> <label id="form-alert">これはリマインダーです</label> </div> 三角形はどうやってできたのですか?この経験を参考にしてください フローティングを実現するjs ページの準備はできました。次に、ダイアログ ボックスの内容と位置を変更する関数が必要です。 const TIPS = document.getElementById("ヒント"); //msgはプロンプトメッセージ、objはプロンプトが必要な要素です function showTips(msg, obj) { TIPS.style.display = "block"; // 非表示のダイアログボックスを表示します var domRect = obj.getBoundingClientRect(); // 要素の位置情報を取得します var width = domRect.x+obj.clientWidth; // 要素の背後に表示されるため、要素の幅を追加します var height = domRect.y; TIPS.style.top = 高さ+"px"; TIPS.style.left = width+"px"; document.getElementById("form-tips").innerHTML = msg; //ダイアログテキストを変更する obj.onblur = function () { TIPS.style.display = "none"; //要素がフォーカスを失ったときにダイアログ ボックスを非表示にします //ここではテーブルで使用するため、defocus メソッドを使用します。必要に応じて変更します}; window.onresize = 関数 (ev) { showTips(msg, obj); //ウィンドウのサイズが変わったときにダイアログの位置を再計算します} } レンダリング 完全なコード <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> <link rel="スタイルシート" href="../static/css/bootstrap.css"> <スタイル> 本文、html{ 背景色: #70a1ff; マージン: 0; パディング: 0; 幅: 100%; 高さ: 100%; } 体 *{ 遷移期間: 500ms; } #フォームブロック{ テキスト配置: 中央; 位置: 絶対; 上位: 50%; 左: 50%; 幅: 500ピクセル; 高さ: 200px; 背景色: #f1f2f6; 変換: translateY(-50%) translateX(-50%); ボックスシャドウ: 0 0 10px #000000; } #フォームフォーム{ 幅: 70%; } #フォームフォーム > *{ マージン: 10px; } #電子メール警告{ 表示: なし; } #ヒント{ パディングトップ: 6px; ds zインデックス: 9999; 位置: 固定; 幅: 1000ピクセル; } #フォームのヒント{ 背景色: 黒; 色: #ffffff; パディング: 0 6px; 位置: 絶対; } #三角形{ 境界線:10px実線; border-color: 透明 黒 透明 透明; } </スタイル> </head> <本文> <div id="ヒント"> <label id="三角形"></label> <label id="form-tips">これはヒントです</label> </div> <div id="フォームブロック"> <h1>登録</h1> <フォームid="フォームフォーム" クラス="センターブロック"> <div> <input onfocus="showTips('メールのヒント',this)" id="email" class="form-control" placeholder="メール"> <div id="email-warning" class="label-warning">正しいメールアドレスを入力してください。</div> </div> <div> <input onfocus="showTips('テストテキスト', this)" id="vrf" class="form-control" placeholder="検証コード"> <div id="vrf-warning" class="label-warning hidden">有効なメールアドレスを入力してください。</div> </div> </フォーム> </div> <!-- <button click="changeFormHeight('500')">テスト</button>--> <スクリプト> const TIPS = document.getElementById("ヒント"); 関数 showTips(msg, obj) { TIPS.style.display = "ブロック"; var domRect = obj.getBoundingClientRect(); var 幅 = domRect.x + obj.clientWidth; var 高さ = domRect.y; TIPS.style.top = 高さ+"px"; TIPS.style.left = width+"px"; document.getElementById("フォームヒント").innerHTML = msg; obj.onblur = 関数 () { TIPS.style.display = "なし"; }; window.onresize = 関数 (ev) { ヒントを表示します(msg, obj); } } </スクリプト> </本文> </html> 要約する 上記はエディターが導入した HTML フローティングプロンプトボックス機能の実装コードです。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残してください。エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
>>: スクロールバーの美化効果を実現するための CSS3 のサンプル コード
これまでに CSS の基本的なセレクターをいくつか学習しましたが、今日は CSS の複雑なセレクター...
この記事では、DingTalkの勤怠カレンダーを実装するためのVueの具体的なコードを参考までに共有...
ソースコード(一部のクラスは削除されています):コードをコピーコードは次のとおりです。 <テー...
Taobao のウェブページはインポートを使用していますが、多くのウェブサイトはリンクを使用していま...
目次関数基本的なクエリ関数クエリ条件の初期化ページのレンダリングクエリと表示の最適化をさらに強化プル...
1. インストールバージョンの詳細 サーバー: MariaDB サーバーバージョン: 5.5.60-...
Linux では、ファイルが作成されると、そのファイルの所有者はファイルを作成したユーザーになります...
ClickHouse は、オープンソースの列指向 DBMS (Yandex によって開発) です。 ...
概要今日は主に、MySQL データベースから binlog ログを正しく削除する方法を紹介します。ロ...
目次執筆の背景プロジェクトの説明事前準備注記執筆の背景以前のプロジェクトではTencent Maps...
百度入力方式の担当者は、百度入力方式のオープンAPIの最大の利点は操作が便利であることであり、プラッ...
コンテンツオーバーフローとは何ですか?実際、テキストが大量にある場合、コンテンツ領域がそれだけの長さ...
SQL文 /* MySQL で重複行を削除するいくつかの方法 ---Chu Minfei ---20...
目次1. import_tableの紹介2. データのロードとテーブル関数のインポートの例2.1 L...
HTML 初心者は、ファイルを正しく参照する方法という問題によく遭遇します。たとえば、HTML ペー...