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

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

需要背景

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

技術的な問題

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

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

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

推薦する

Linux で open-vswitch をインストールおよびアンインストールする方法

1. ソースコードからovsをコンパイルしてインストールします。依存関係をインストールします: # ...

フロントエンドの状態管理(パート2)

目次1. 再出発1.1. ストア(司書) 1.2. 状態(書籍) 1.3. アクション(図書貸出リス...

CSS の :focus-within の楽しさについて簡単に説明します

Bステーションでパスワードを入力するときに目を覆っているこの画像を見たことがある人もいると思いますこ...

Centos7環境でMySQL 5.6のインスタンスを複数作成する方法の詳細な説明

この記事では、CentOS 7 環境で MySQL 5.6 の複数のインスタンスを作成する方法につい...

Linux で MySQL 5.6 X64 バージョンをインストールする詳細な手順

環境: 1. CentOS6.5 X64 2.mysql-5.6.34-linux-glibc2.5...

プロフェッショナルなMySQL開発設計仕様とSQL記述仕様

チーム開発のプロセスでは、プロジェクトの安定性、コードの効率性、管理の利便性のために、内部開発および...

Maven で tomcat8-maven-plugin プラグインを使用する詳細なチュートリアル

オンラインで多くの記事を検索しましたが、解決策は見つかりませんでした。次のように、tomcat7-m...

Ubuntu システムログで /var/log/messages を設定する方法

1. 問題の説明今日、システム ログ ファイルを確認する必要がありますが、/var/log/mess...

Dockerfile を使用したカスタムイメージの構築の実装

目次序文Dockerfile の紹介Dockerfileはイメージプロセスを構築するDockerfi...

Linux システムで Java 環境変数を設定する方法

Java環境変数を設定するここで、環境変数は etc/profile に設定され、つまり、すべてのユ...

Vueカスタム命令とその使用方法の詳細な説明

目次1. 指令とは何ですか? Vue でよく使われる組み込みの v ディレクティブv-if と v-...

DCL を使用して MySQL でユーザーを管理し、権限を制御する方法

DCL (データ制御言語): データベースのアクセス権とセキュリティ レベルを定義し、ユーザーを作成...

ログインフォームを実装するためのJavaScript

この記事の例では、ログインフォームを実装するためのJavaScriptの具体的なコードを参考までに共...

MySQLからElasticsearchにデータを同期する方法の詳細な説明

目次1. 同期の原理2. ログスタッシュ入力JDBC 3. go-mysql-elasticsear...

Flash が HTML div 要素を覆わないようにする方法

今日、フラッシュ広告のコードを書いていたとき、フラッシュに付属するリンクはポップアップ広告と間違われ...