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

Question

我正在考虑是使用 <select> 还是 <datalist> 来显示下拉列表，用户可以从中 select 项目。

<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

您可以在 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>

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

Is there a potential way to disable user input in a <datalist>?

html

select

listbox

datalist

drop-down-menu