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

Posted 2023-03-05

【中文标题】是否有可能在 <datalist> 中禁用用户输入？

【英文标题】：Is there a potential way to disable user input in a <datalist>?

【发布时间】：2018-06-17 21:50:07

【问题描述】：

我正在争论使用<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' 属性，但这会导致整个不可点击。

【参考方案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>