是否有一种潜在的方法可以禁用 <datalist> 中的用户输入? [英] Is there a potential way to disable user input in a <datalist>?
问题描述
我正在争论使用 或 来显示下拉列表，用户可以从中选择项目.
I'm debating between using a <select> or <datalist> to display a drop-down list from which the user can select the items.
<select> 标签的一个缺点是它不一致，因为它在不同的浏览器中呈现方式不同:有些浏览器显示滚动条，有些浏览器显示下拉列表.
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>有没有办法在保留下拉列表的同时禁用输入栏?我尝试了 'readonly' 属性，但这导致整个不可点击.
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.
推荐答案
你可以使用 input 元素上的 pattern 属性 以限制允许的值:
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屋！
