Question

<input type="text" list="numbers">

<datalist id="numbers">
    <option value="110">
    <option value="111">
    <option value="112">
    <option value="113">
    <option value="114">
    <option value="115">
</datalist>

http://jsfiddle.net/shvPB/

方案：
1.用户开始写任何值选项或箭头向下/向上，下拉列表显示选项 2.用户在其中一个选项上单击鼠标或单击鼠标右键，重要的是：她仍然可以向上/向下滚动列表。
3.用户在输入字段外单击。输入字段不再处于焦点位置 4.用户想要更改她的选择并单击输入字段，但选项不再可见。

如何在步骤4中显示选项？

Answer 1

这是一个特殊的解决方案，但应该适合您的需求......（使用jQuery）......：

摘要：制作您自己的类似select元素，将值从<datalist>复制到它。然后将2个事件绑定到输入：显示/隐藏焦点/模糊。并将事件添加到每个类似于选项的元素，以将click（）上的值传递给输入。当没有<datalist>的下拉列表时，它将是一个保存元素。有一个棘手的事情 - 消失由setTimeout完成，因为聚焦输出（模糊）事件比点击事件更快被触发...

到目前为止创建的小提琴：http://jsfiddle.net/xPx2Z/3/ :) / * chrome look-a-like dropdown * /

顺便说一句：你不能打开“真实”<select>，仍然可以输入focus()，因此使用<select>元素的解决方案并不好。所以我稍微更新了答案:)

更改HTML5 datalist中的输入值

1 个答案: