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

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

需要背景

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

技術的な問題

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

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

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

推薦する

MySQLストレージ時間タイプの選択に関する問題の説明

MySQL では、datetime 型は通常、時間を保存するために使用されますが、現在では多くのシス...

jsを使用してカルーセル効果を実現する

今日は、参考までに、jsを使用してカルーセルマップの効果を実現する方法についてお話ししましょう。具体...

URL 書き換えモジュール 2.1 URL 書き換えモジュールのルール記述

目次前提条件テストページの設定書き換えルールの作成命名規則モードの定義アクションの定義設定ファイル内...

Debian 9 システムに MySQL データベースをインストールする方法

序文タイトルを見ると、誰もが「Debian 9 に MySQL をインストールするにはどうすればいい...

Alibaba Cloud SSHリモート接続がしばらくすると切断される問題を解決

問題の再現Alibaba Cloud Server は、Finalshell リモート接続を使用して...

VMware10 での CentOS 7 のインストールと設定のチュートリアル

Ubuntu が今日のデスクトップ ユーザーの間で最も人気のある Linux オペレーティング シス...

HTMLフォーム要素の詳しい解説(パート2)

HTML 入力属性値属性value 属性は、入力フィールドの初期値を指定します。 <フォーム...

nginx proxy_cache バッチキャッシュクリアスクリプトの紹介

前書き: 以前、公式の nginx proxy_cache を CDN 静的キャッシュとして使用して...

Vue-Jest自動テストの基本構成の詳しい説明

目次インストール構成よくある間違い事前テスト作業依存関係の扱いインスタンスとDOMを生成する要約する...

React、Angular、Vueの3つの主要なフロントエンド技術の詳細説明

目次1. 反応する基本的な使い方注目すべき機能クラスコンポーネント仮想DOMライフサイクルメソッドJ...

innodb_autoinc_lock_mode の表現と値の選択方法についての簡単な説明

前提条件: Percona 5.6 バージョン、トランザクション分離レベルは RR mysql>...

vue3を使用して人間と猫のコミュニケーションアプレットを実装する

目次序文プロジェクトを初期化するデザインコードの実装オンデマンドロードオーディオを再生録音長押しイベ...

Linux mpstat コマンドの使用方法の詳細な説明

1. mpstatコマンド1.1 コマンド形式 mpstat [ -A ] [ -u ] [ -V ...

CentOS 6.8 に MySQL 8.0.18 をインストールするチュートリアルの簡単な分析 (RPM 方式)

今日は、CentOS 6.8 サーバーに MySQL 8.0.18 をインストールする方法を記録しま...

Vue での this.$set の動的データバインディングのケーススタディ

インターネット上の this.$set の説明はわかりにくいと感じます。単一データ、オブジェクト、配...