選択/フォーカスされたときにすべてのオプションを表示させる良い方法は、現在
2022-01-13 16:15:43
開発中にこのような要件に出くわしたので、バックアップとして文書化しておきました。
要求事項の背景
ページ上のショートカットキーボードで、支払い方法の選択ボックス(ドロップダウンリスト)を素早く探し出し、選択することができます。
技術的な困難
現在のブラウザは、コードによって位置決めされた場合、ドロップダウンリストのすべてのオプションをリスト表示することをサポートしていません(マウスクリックのみ)。
Webで情報を探した結果、現時点でのベターな対処法。
selectのsizeプロパティとボックスレイアウトのpositionプロパティを併用し、以下のようなコードで実現します。
<td align="right">
Payment Method:
</td>
<td style="padding:0px;vertical-align:top;">
<! -- The select must be wrapped in a div here, otherwise it's not compatible under 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>USD</option>
<option>credit card</option>
<option>Hong Kong Dollars</option>
<option>HKD</option>
</select>
<span style="color:#ff0000"></div>
</span></td>
エキスパンド、アンエクスパンドともにシンプルなメソッドです。
function expand(obj){
$(obj).attr("size","10");
}
function unexpand(obj){
$(obj).attr("size","1");
}
domのフローレイアウトに影響を与えないように、selectの位置をabsoluteに設定します。次に、select のコンテナの位置を relative に設定し、select がそのコンテナに従って配置されるようにします。
ここで注意したいのは、table要素内のselectのコンテナとしてdivを使用することです。table関連要素にposition:relativeを設定することはw3c css標準では不定なので、select要素の位置はff以下のbody要素に直接応じて配置されることになります。
参考
http://www.php-insite.com/autoexpand_select.html ページソースを直接表示する
http://bbs.csdn.net/topics/330158935 lingshuo1993の回答へのコメントを残す
要求事項の背景
ページ上のショートカットキーボードで、支払い方法の選択ボックス(ドロップダウンリスト)を素早く探し出し、選択することができます。
技術的な困難
現在のブラウザは、コードによって位置決めされた場合、ドロップダウンリストのすべてのオプションをリスト表示することをサポートしていません(マウスクリックのみ)。
Webで情報を探した結果、現時点でのベターな対処法。
selectのsizeプロパティとボックスレイアウトのpositionプロパティを併用し、以下のようなコードで実現します。
コピーコード
コードは以下の通りです。
<td align="right">
Payment Method:
</td>
<td style="padding:0px;vertical-align:top;">
<! -- The select must be wrapped in a div here, otherwise it's not compatible under 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>USD</option>
<option>credit card</option>
<option>Hong Kong Dollars</option>
<option>HKD</option>
</select>
<span style="color:#ff0000"></div>
</span></td>
エキスパンド、アンエクスパンドともにシンプルなメソッドです。
コピーコード
コードは以下の通りです。
function expand(obj){
$(obj).attr("size","10");
}
function unexpand(obj){
$(obj).attr("size","1");
}
domのフローレイアウトに影響を与えないように、selectの位置をabsoluteに設定します。次に、select のコンテナの位置を relative に設定し、select がそのコンテナに従って配置されるようにします。
ここで注意したいのは、table要素内のselectのコンテナとしてdivを使用することです。table関連要素にposition:relativeを設定することはw3c css標準では不定なので、select要素の位置はff以下のbody要素に直接応じて配置されることになります。
参考
http://www.php-insite.com/autoexpand_select.html ページソースを直接表示する
http://bbs.csdn.net/topics/330158935 lingshuo1993の回答へのコメントを残す
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン