更改HTML5数据列表中的输入值 [英] Changing the input value in HTML5 datalist

问题描述

 < input type =textlist =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.用户在其中一个选项上单击鼠标或enterclicks，重要的是：她仍然可以向上/向下滚动列表。

3。用户在输入字段外单击。输入字段不再焦点。

4.用户想要更改她的选择并单击输入字段，但选项不再可见。

如何显示第4步中的选项？

解决方案

这是一个特别的解决方案，但应该满足您的需求...（使用jQuery）...：
$ b 摘要：让您的自己的类似select元素，将值从< datalist> 复制到它。然后绑定2个事件输入：显示/隐藏焦点/模糊。并且将事件添加到每个类似于选项的元素，以在click（）上传递一个值来输入。当没有< datalist> 的下拉菜单时，它将成为可见的保存元素。有一个棘手的事情 - 消失是由setTimeout完成的，因为focusout（blur）事件比点击事件被触发...

小提琴迄今创建： http://jsfiddle.net/xPx2Z/3/ :) / * chrome look-a-like dropdown * /

顺便说一句：你不能有真< select> 已打开，仍然是焦点（）对输入进行编辑，
因此使用< select> 元素的解决方案是不好的。所以我更新了答案:)

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

Scenario:
1. User starts to write any of the value options OR arrow down/up, and the dropdown list suggest the options.
2. User mouseclicks or enterclicks on one of the options, and important: she can still scroll up/down the list.
3. User clicks outside the input field. The input field is not in focus anymore.
4. User wants to change her choice and clicks on the input field but the options are not visible anymore.

How can I show the options at step 4 as well?

解决方案

This is a particular solution but should work for your needs... (using jQuery)...:

Summary: Make your own select-like element, copy values from <datalist> to it. Then bind 2 events to input: show/hide on focus/blur. And add event to every option-like element to pass a value on click() to input. It will be a saving element that will be visible when there will be no <datalist>'s dropdown. There is one tricky thing - disappearing is done by setTimeout, because focusout(blur) event is fired sooner than click event...

Fiddle created so far: http://jsfiddle.net/xPx2Z/3/ :) /*chrome look-a-like dropdown */

BTW: you cant have "true" <select> opened and still be focus()ed on input, so solution with a <select> element is no good. So I updated the answer a bit :)

这篇关于更改HTML5数据列表中的输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！