選択/フォーカス時にすべてのオプションをリストする現在のより良い方法

選択/フォーカス時にすべてのオプションをリストする現在のより良い方法
開発中にこのような要件に遭遇したので、将来使用するために記録しました。

需要背景

キーボード ショートカットを使用して、ページ上の支払い方法選択ボックス (ドロップダウン リスト) に移動し、選択します。

技術的な問題

現在、ブラウザは、コードを使用してドロップダウン リストの下にすべてのオプションを一覧表示することをサポートしておらず、マウス クリックによってのみ実行できます。

ネットで情報を検索した後、最善の方法を見つけました。

これを実現するには、select の size 属性と box layout の position 属性を使用します。具体的なコードは次のとおりです。

コードをコピー
コードは次のとおりです。

<td align="right">
支払い方法:
</td>
<td スタイル="padding:0px;vertical-align:top;">
<!-- 選択部分を div で囲む必要があります。そうしないと FF と互換性がなくなります -->
<span style="color:#ff0000"><div style="position:relative;padding:1px;">
</span> <select id="payType" name="payType" style="position:absolute;" onfocus="expand(this)" onblur="unexpand(this)">
<option>RMB</option>
<option>米ドル</option>
<option>クレジットカード</option>
<option>香港ドル</option>
<option>香港ドル</option>
</選択>
<span style="color:#ff0000"></div>
</span></td>

expand メソッドと unexpand メソッドはどちらも簡単です。

コードをコピー
コードは次のとおりです。

関数expand(obj){
$(obj).attr("サイズ","10");
}
関数 unexpand(obj){
$(obj).attr("サイズ","1");
}

DOM フロー レイアウトに影響を与えないように、選択位置を絶対位置に設定します。次に、選択がコンテナーに応じて配置されるように、コンテナーの位置を相対的に設定します。

ここで注意すべき点は、div はテーブル要素内の選択のコンテナーとして使用する必要があることです。これは、w3c CSS 標準によれば、テーブル関連要素での position:relative の設定が未定義であるため、ff では選択要素が body 要素に従って直接配置されるためです。

参考文献:

http://www.php-insite.com/autoexpand_select.html ページのソースコードを直接表示する
http://bbs.csdn.net/topics/330158935 lingshuo1993の回答に注目してください

<<:  MySQLデータ復旧のさまざまな方法の概要

>>:  CSS3を使用してトランジションとアニメーション効果を実現する

推薦する

HTML Webページの例を使用してヘッドエリアコードの意味を説明する

例を使って、Webページのヘッダー情報の意味を理解しましょう。 <!DOCTYPE HTML ...

Dockerコンテナ監視の原理とcAdvisorのインストールおよび使用方法

本番環境におけるコンテナの稼働状況を監視することは非常に重要です。監視を通じて、コンテナの稼働状況を...

バントリストコンポーネントをスクロールしても、スクロールバーの位置は保持されます。

バントリストコンポーネントをスクロールするときに、スクロールバーの位置が保持されます。これは、kee...

JSはreduce()メソッドを使用してツリー構造データを処理します

目次意味文法例1. 初期値initが渡されない2. 初期値を渡す場合3. アレイの重複排除4. Re...

MySQL学習エンジンの詳細な説明、説明、権限

エンジン導入InnodbエンジンInnodb エンジンは、データベース ACID トランザクションを...

Linux コマンドラインでメールを送信する 5 つの方法 (推奨)

シェル スクリプトで電子メールを作成する必要がある場合は、コマンド ラインから電子メールを送信する知...

Brotli圧縮アルゴリズムを有効にするNginxの実装プロセスの詳細な説明

序文Web アプリケーションでは、トラフィックを節約し、転送データのサイズを縮小し、転送効率を向上さ...

JavaScriptは双方向リンクリストプロセス分析を実装します

目次1. 二重連結リストとは何か2. 双方向リンクリストのカプセル化3. 双方向リンクリストの一般的...

ウェブデザインにおけるテキスト入力ボックスのパラメータの説明

一般的なゲストブック、フォーラムなどでは、テキスト入力ボックスが使われています。これは HTML 言...

npm 淘宝ミラー変更説明

1. トップレベルの使用法1. cnpmをインストールする npm i -g cnpm --regi...

Windows で IP アドレスを指定してサーバーへのリモート アクセスを設定する方法

当社には、外部ネットワークからの干渉を受けることが多いサーバーが多数あります。侵入者はポート 338...

MySQLにおける分散ロックの考え方をDBの助けを借りて詳しく説明します

序文スタンドアロン ロックであっても分散ロックであっても、共有データに基づいて現在の操作の動作を判断...

HTML の色に関する参考資料

HTML では、色は 2 つの方法で表現されます。 1 つは、青の場合は blue のように色の名前...

HTML ページでギリシャ文字を使用する方法

ギリシャ文字は、特に数学や物理学などの科学技術分野で非常によく使用される記号列であり、特定の意味を持...