開発中にこのような要件に遭遇したので、将来使用するために記録しました。 需要背景 キーボード ショートカットを使用して、ページ上の支払い方法選択ボックス (ドロップダウン リスト) に移動し、選択します。 技術的な問題 現在、ブラウザは、コードを使用してドロップダウン リストの下にすべてのオプションを一覧表示することをサポートしておらず、マウス クリックによってのみ実行できます。 ネットで情報を検索した後、最善の方法を見つけました。 これを実現するには、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を使用してトランジションとアニメーション効果を実現する
要素フォームとコード表示詳細はエレメントフォーム公式サイトをご覧ください構造と機能の分析紹介とソース...
クリック時に背景色を生成する要素の CSS スタイルに次のコードを追加します。 -webkit-ta...
目次ウェブ開発1. Web開発の概要Tomcatのインストールと設定Tomcatをインストールする2...
MySQL での置換例の詳細な説明replace into は insert と似ていますが、rep...
包括的なドキュメントgithubアドレスhttps://github.com/RocketChat/...
「脳が多数の領域間の関係を処理できるように、入力は論理的なグループに分割する必要があります。」 – ...
ヘッドと DTD はページには表示されませんが、Web ページの重要な要素です。 なぜ失敗したのでし...
この記事の主な内容は次のとおりです。 1. 閉じるボタン2.キャレット3. フローティングを素早く設...
この問題について話すとき、垂直方向の中央揃えを設定するための vertical-align 属性が ...
序文: MySQL システムには、さまざまな種類のログが存在します。さまざまなログにはそれぞれ独自の...
<br />2 年前に PPK が投稿した素晴らしいブログ記事では、contains()...
第1章 ソースコードのインストールRPM パッケージは特定のシステムとプラットフォームに応じて指定さ...
目次1. 背景: 2. デザインのアイデア: 3. 起動スクリプトを書く4. イメージを構築する5....
1. コマンドの紹介contab (cron テーブル) コマンドは、Windows のスケジュール...
MariaDBをアンインストールするCentOS7 ではデフォルトで MySQL の代わりに Mar...