是否有可能在<datalist>中禁用用户输入？

Question

我在使用<select>或<datalist>显示下拉列表之间进行辩论，用户可以从中选择项目。

该<select>标记的一个缺点是它不一致，因为它在不同的浏览器中呈现的方式有所不同：某些浏览器使用滚动条显示，有些则是下拉列表。

在<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

您可以使用该pattern属性上的input元素，以限制允许的值：

?<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>