<datalist>でユーザー入力を無効にする可能性はありますか？

Question

<select>または<datalist>を使用して、ユーザーがアイテムを選択できるドロップダウンリストを表示するかどうかを議論しています。

<select>タグの1つの欠点は、さまざまなブラウザで異なるレンダリングが行われるという点です。一部のブラウザはスクロールバーで表示され、一部のブラウザではドロップダウンリストです。

<datalist>しかし、私は、テキスト入力を無効にする方法があるかどうかを知りたいのですが、下矢印ボタンをクリックしないとテキストボックスに入力することができます示すように、入力フィールド上：

​<form action="demo_form.asp" method="get"> 
 
    <input list="browsers" name="browser"> 
 
    <datalist id="browsers"> 
 
    <option value="Internet Explorer"> 
 
    <option value="Firefox"> 
 
    <option value="Chrome"> 
 
    <option value="Opera"> 
 
    <option value="Safari"> 
 
    </datalist> 
 
    <input type="submit"> 
 
</form>

は、ドロップダウンリストを維持しながら、入力バーを無効にするには、何らかの方法はありますか？私は 'readonly'属性を試しましたが、それはクリック不可能な全体をレンダリングします。

Answer 1

あなたは許容値を制限するためにinput要素にthe pattern attributeを使用することもできます。

​<form action="demo_form.asp" method="get"> 
    <input list="browsers" name="browser" 
    pattern="Internet Explorer|Firefox|Chrome|Opera|Safari" 
    title='Must be "Internet Explorer", "Firefox", "Chrome", "Opera", or "Safari"'> 
    <datalist id="browsers"> 
    <option value="Internet Explorer"> 
    <option value="Firefox"> 
    <option value="Chrome"> 
    <option value="Opera"> 
    <option value="Safari"> 
    </datalist> 
    <input type="submit"> 
</form> 

を