在< datalist>中禁用用户输入是否有潜在的方法？ [英] Is there a potential way to disable user input in a <datalist>?

问题描述

我正在使用< select> 或< datalist> 来辩论，用户可以从中选择项目。

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

另一方面，< datalist> 看起来不错，但我只想知道是否有任何方法来禁用文本输入，用户可以在文本框中输入任何他们想要的内容单击输入字段上的向下箭头按钮，如图所示：

< pre-class =snippet-code-html lang-html prettyprint-override form action =demo_form.aspmethod =get> <输入列表=浏览器名称=浏览器> < datalist id =浏览器> < option value =Internet Explorer> < option value =Firefox> < option value =Chrome> < option value =Opera> < option value =Safari> < /数据列表> < input type =submit>< / form>

有没有办法在保持下拉列表的同时禁用输入栏？我尝试了'只读'属性，但是呈现整个不可点击。

：//html.spec.whatwg.org/multipage/forms.html#the-pattern-attributerel =nofollow noreferrer> 模式属性在 input 元素上限制允许的值：

< form action =demo_form.aspmethod =get>
pattern =Internet Explorer | Firefox | Chrome | Opera | Safari
title ='必须是Internet Explorer， Firefox，Chrome，Opera或Safari>
< datalist id =浏览器>
< option value =Internet Explorer>
< option value =Firefox>
< option value =Chrome>
< option value =Opera>
< option value =Safari>
< / datalist>
< input type =submit>
< / form>


I'm debating between using a <select> or <datalist> to display a drop-down list from which the user can select the items.

One downside of the <select> tag is that it's inconsistent as it renders differently in different browsers: some browsers it displays with scroll bar, and for some it's a drop-down list.

The <datalist> on the other hand seems good but I just want to know if there is any way to disable the text input where the user can type whatever they want in the text box if they don't click the down arrow button on the input field as shown:

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

Is there someway to disable the input bar while keeping the dropdown list? I tried the 'readonly' attribute but that renders the whole non-clickable.

解决方案

You could use the pattern attribute on the input element to restrict the allowed values:

​<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>中禁用用户输入是否有潜在的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！