開発中にこのような要件に遭遇したので、将来使用するために記録しました。 需要背景 キーボード ショートカットを使用して、ページ上の支払い方法選択ボックス (ドロップダウン リスト) に移動し、選択します。 技術的な問題 現在、ブラウザは、コードを使用してドロップダウン リストの下にすべてのオプションを一覧表示することをサポートしておらず、マウス クリックによってのみ実行できます。 ネットで情報を検索した後、最善の方法を見つけました。 これを実現するには、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の回答に注目してください |
>>: CSS3を使用してトランジションとアニメーション効果を実現する
1. ソースコードからovsをコンパイルしてインストールします。依存関係をインストールします: # ...
目次1. 再出発1.1. ストア(司書) 1.2. 状態(書籍) 1.3. アクション(図書貸出リス...
Bステーションでパスワードを入力するときに目を覆っているこの画像を見たことがある人もいると思いますこ...
この記事では、CentOS 7 環境で MySQL 5.6 の複数のインスタンスを作成する方法につい...
環境: 1. CentOS6.5 X64 2.mysql-5.6.34-linux-glibc2.5...
チーム開発のプロセスでは、プロジェクトの安定性、コードの効率性、管理の利便性のために、内部開発および...
オンラインで多くの記事を検索しましたが、解決策は見つかりませんでした。次のように、tomcat7-m...
1. 問題の説明今日、システム ログ ファイルを確認する必要がありますが、/var/log/mess...
目次序文Dockerfile の紹介Dockerfileはイメージプロセスを構築するDockerfi...
Java環境変数を設定するここで、環境変数は etc/profile に設定され、つまり、すべてのユ...
目次1. 指令とは何ですか? Vue でよく使われる組み込みの v ディレクティブv-if と v-...
DCL (データ制御言語): データベースのアクセス権とセキュリティ レベルを定義し、ユーザーを作成...
この記事の例では、ログインフォームを実装するためのJavaScriptの具体的なコードを参考までに共...
目次1. 同期の原理2. ログスタッシュ入力JDBC 3. go-mysql-elasticsear...
今日、フラッシュ広告のコードを書いていたとき、フラッシュに付属するリンクはポップアップ広告と間違われ...