带有输入条目选项的 HTML 组合框 [英] HTML combo box with option to type an entry

问题描述

我的印象是，除了选择列表中已有的任何值之外，您还可以在组合框中键入内容.但是，我似乎无法找到有关如何执行此操作的信息.是否需要添加属性以允许输入文本?

I was under the impression you could type into a combo box besides selecting any values already in the list. However, I can't seem to find info on how to do this. Is there a property I need to add to it to allow typing of text?

推荐答案

在 datalist(见下面的注释)之前，你需要提供一个额外的 input 元素供人们输入在他们自己的选择中.

Before datalist (see note below), you would supply an additional input element for people to type in their own option.

<select name="example">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="-">Other</option>
</select>

<input type="text" name="other">

这种机制适用于所有浏览器，不需要 JavaScript.

您可以使用一点 JavaScript 聪明地只显示 input 如果Other"是选项被选中.

You could use a little JavaScript to be clever about only showing the input if the "Other" option was selected.

datalist 元素旨在为此概念提供更好的机制.在某些浏览器中，例如iOS Safari12.2，这不受支持或实施有问题.检查 Can I Use 页面以查看当前的数据列表支持.

The datalist element is intended to provide a better mechanism for this concept. In some browsers, e.g. iOS Safari < 12.2, this was not supported or the implementation had issues. Check the Can I Use page to see current datalist support.

<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
  <option value="A">  
  <option value="B">
</datalist>

这篇关于带有输入条目选项的 HTML 组合框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！