[解決済み] HTMLコンボボックス、入力オプション付き
2022-03-08 03:17:44
質問
コンボボックスは、リストにある値を選択するだけでなく、入力することもできると思っていました。しかし、この方法についての情報が見つかりません。テキストを入力できるようにするために追加しなければならないプロパティがあるのでしょうか?
どのように解決するのですか?
前
datalist
(以下の注を参照)、追加で
input
要素で、ユーザーが自分の好きなオプションを入力できるようにします。
<select name="example">
<option value="A">A</option>
<option value="B">B</option>
<option value="-">Other</option>
</select>
<input type="text" name="other">
この仕組み すべてのブラウザで動作し、JavaScriptを必要としない .
ちょっとしたJavaScriptを使って、巧妙に
input
が選択されている場合、quot;Other" のオプションが表示されます。
datalist 要素
は
datalist
要素は、このコンセプトのためのより良いメカニズムを提供することを意図しています。iOS Safari < 12.2など一部のブラウザでは、これがサポートされていないか、実装に問題がありました。
現在のdatalistのサポート状況は、Can I Useのページでご確認ください。
.
<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
<option value="A">
<option value="B">
</datalist>
関連
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】エラー。要求されたURL"[no URL]"は無効です。
-
[解決済み】Markdownで'target="_blank"'でリンクを作成することはできますか?
-
[解決済み】WebページでWindows 95のフォントを使用する
-
[解決済み] フレックスアイテムを右にフロートさせる
-
[解決済み] 迷子の終了タグ "head"
-
[解決済み] テーブルセルの背景を透明にする方法
-
[解決済み] 背景画像を前後にパンするCSS【非公開
-
[解決済み] d3.tipが動作しないのはなぜですか?
-
[解決済み] ChromeのデベロッパーツールでHTML Bodyにcz-shortcut-listen="true "が表示される?
-
[解決済み] 必要なキーに一致するルートがありません。[:id]