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

您可以在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>中禁用用户输入？

1 个答案: