有没有一种潜在的方法可以禁用 <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”属性，但这会使整个内容都无法点击。

- 5120bee

Answer 1

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

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

- sideshowbarker