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

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

需要背景

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

技術的な問題

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

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

これを実現するには、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を使用してトランジションとアニメーション効果を実現する

推薦する

WIN10 に複数のデータベースがインストールされている場合にコンピュータの速度低下を防ぐ方法

必要なときにサービスを有効にし、必要がないときは無効にします。データベース サービスを管理する方法:...

Vue のキーボードイベント監視の概要

キー修飾子キーボード イベントをリッスンする場合、詳細なキーを確認する必要があることがよくあります。...

MySQL テーブル分割後にスムーズにオンラインになる方法

目次テーブルの目的例えばテーブル分割戦略すでにオンラインになっている実行中のテーブルはどうすればよい...

Mybatis ページングプラグイン pageHelper の詳細な説明と簡単な例

Mybatis ページングプラグイン pageHelper の詳細な説明と簡単な例動作フレームワーク...

MySQLの権限とインデックスの詳細な説明

mysql の権限とインデックスmysql の最高権限ユーザーは root です。 CREATE U...

JavaScript 事前分析、オブジェクトの詳細

目次1. 事前分析1. 変数の事前解析と関数の事前解析1. 変数の事前解析2. 機能事前分析2. 事...

Linux での MySQL 5.6.24 (バ​​イナリ) 自動インストール スクリプト

この記事では、Linux環境でのmysql5.6.24自動インストールスクリプトコードを参考までに共...

時間に基づいて日付をクエリするためのMySQL最適化テクニック

たとえば、昨日新規登録されたユーザーを照会するには、次の 2 つの書き方があります。 説明する ch...

スクロールバーを非表示にしながらもスクロール効果を維持する純粋な CSS (モバイルと PC)

携帯モバイル ページは Chrome および Safari とのみ互換性があればよいため、カスタム ...

モバイル Web WAP には Bootstrap と jQuery Mobile のどちらを使用すべきか

問題を解決するBootstrap は、次の問題を解決する CSS フレームワークです。デバイス間での...

Docker-compose を使用して Django アプリケーションをオフラインでデプロイする方法

目次開発環境用のDocker-ceをインストールする開発環境用のDocker-composeをインス...

js を使用してウォーターフォール効果を実現する

この記事の例では、滝の流れの効果を実現するためのjsの具体的なコードを参考までに共有しています。具体...

Web コンテンツ ページを作成するための 9 つの実用的なヒント

コンテンツ1. 読者に留まる理由を与える。ウェブページを面白く魅力的なものにしましょう。しかし、まず...

HTML タグ dl dt dd 使用方法

基本構造:コードをコピーコードは次のとおりです。 <ダウンロード> <dt>...

タイムライン効果を実現するCSS3

最近、コンピューターの電源を入れたところ、Geek Academy が新規ユーザーに 1 か月の無料...