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

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

需要背景

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

技術的な問題

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

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

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

推薦する

SpringBoot + Vue プロジェクトを Linux サーバーにデプロイするための詳細なチュートリアル

序文SpringBoot + Vueのフロントエンドとバックエンドを分離したプロジェクトをどのように...

NextCloud プライベート クラウド ストレージ ネットワーク ディスクの構築に関する詳細なチュートリアル

Nextcloud は、オープンソースで無料のプライベート クラウド ストレージ ネットワーク ディ...

初心者向けウェブサイト構築ガイド⑦:美しいウェブサイトを作るのはとっても簡単

私はかつて、ウェブサイトを一度も構築したことのない人々が、初心者向けのウェブサイト構築方法に関する私...

Vue+ElementUI はページング関数を実装します - mysql データ

目次1. 問題2. 解決策2.1 ページングコンポーネント2.2 データベースデータを取得する関数:...

nginx で同時接続リクエストの数を制限する方法

導入同時接続数を制限するモジュールは http_limit_conn_module です。アドレス:...

ウェブページの表の分割線を削除する方法

<br />Web テーブルの分割線を削除する方法。実際、上記の 3 つの表はいずれも ...

CentOS7 のシステム サービスに Nginx を追加する方法

導入コンパイル、インストール、問題の解決後、Nginx は正常に動作していますが、現時点では Ngi...

Mysqlクエリ条件で文字列の末尾にスペースがあっても一致しない問題の詳細な説明

1. テーブル構造テーブル人id名前1あなた2あなた(スペース) 3あなた(スペース2つ) 2. ク...

さまざまな環境での Docker Compose のインストール方法

1. オンラインインストール現在、Linux x86アーキテクチャのオンラインインストールのみを試し...

Gitコミットログの変更方法のまとめ

ケース1: 最後の提出とプッシュなし次のコマンドを実行します。 git コミット --amend g...

CSSフィルターにはどんな魔法の用途があるか

背景基本概念CSS filterプロパティは、ぼかしや色の変化などのグラフィック効果を要素に適用して...

Centos7 環境でバイナリ インストール パッケージから mysql5.6 をインストールする方法の詳細な説明

この記事では、centos7 環境でバイナリ インストール パッケージを使用して mysql5.6 ...

熟練デザイナーの7つの原則(1):フォントデザイン

まあ、あなたはデザインの達人かもしれませんし、あるいはそれは大げさすぎるかもしれませんが、少なくとも...

@media レスポンシブ CSS を使用してさまざまな画面に適応する例

定義と使用@media クエリを使用すると、さまざまなメディア タイプに異なるスタイルを定義できます...

Bash で山括弧を使用するその他の方法

序文この記事では、山括弧のその他の用途をさらに詳しく見ていきます。前回の記事では、山括弧 (<...