javascript 当焦点事件在输入上触发时使 HTML5 数据列表可见
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15622076/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making HTML5 datalist visible when focus event fires on input
提问by Ady Ngom
As some might know already styling select element is a nightmare, literally impossible without some javascript trickery. The new datalist in HTML5 could serve the same purpose since the user is presented with a list of options and the value is recorded in an input text field.
有些人可能已经知道样式选择元素是一场噩梦，如果没有一些 javascript 技巧，实际上是不可能的。HTML5 中的新数据列表可以用于相同的目的，因为用户会看到一个选项列表，并且值记录在输入文本字段中。
The limitation here is the list does not appear until the user start typing something in the text field and even then is only shown possible matches based on their input. The behavior I want is that as soon as there is focus on the field the entire list of options become visible.
这里的限制是直到用户开始在文本字段中输入内容时才会显示列表，即使如此，也只会根据他们的输入显示可能的匹配项。我想要的行为是，只要关注该字段，整个选项列表就会变得可见。
So I have this code - view on jsbin
所以我有这个代码 -在 jsbin 上查看
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Input - Datalist</title>
</head>
<body>
<input list="categories">
<datalist id="categories">
<option value="Breakfast">Breakfast</option>
<option value="Brunch">Brunch</option>
<option value="Lunch">Lunch</option>
<option value="Dinner">Dinner</option>
<option value="Desserts">Desserts</option>
</datalist>
</body>
</html>
and I'm trying to get that to show with this Javascript:
我试图用这个 Javascript 来显示它：
var catVal = document.getElementsByTagName("input")[0],
cat = document.getElementById("categories");
catVal.style.fontSize = "1.3em";
catVal.addEventListener("focus", function(event){
cat.style.display = "block";
}, false);
Any help would be appreciated,
任何帮助，将不胜感激，
Cheers
干杯
回答by Ulrich Berth
I use the following code:
我使用以下代码：
<input name="anrede"
list="anrede" value="Herr"
onmouseover="focus();old = value;"
onmousedown = "value = '';"
onmouseup="value = old;"/>
<datalist id="anrede">
<option value="Herr" selected></option>
<option value="Frau"></option>
<option value="Fraulein"></option>
</datalist>
mouseover:
Set focus and memorize old value in a -- g l o b a l -- variable
鼠标悬停：
在 -- 全局 -- 变量中设置焦点并记住旧值
mousedown:
Delete value and show datalist(built in functionality)
mousedown：
删除值并显示datalist（内置功能）
mouseup:
Restore old value
mouseup：
恢复旧值
Then select new value.
然后选择新值。
Find this an acceptable workaround towards a combobox.
发现这是一个可接受的组合框解决方法。
回答by user4723924
I hope you like this solution:
我希望你喜欢这个解决方案：
I added a “temp” attribute to the input field for storage and once the mouse hovers over the input filed it will save its current value in temp and then delete the value so as to allow the datalist to open.
我在输入字段中添加了一个“temp”属性用于存储，一旦鼠标悬停在输入字段上，它就会将其当前值保存在 temp 中，然后删除该值以允许打开数据列表。
On mouseout it will restore the field's value from the variable temp. This solution works great under Chromium that I tested.
在 mouseout 时，它将从变量 temp 恢复字段的值。这个解决方案在我测试过的 Chromium 下效果很好。
As a bonus you can add a placeholder="Click to see all your options"
作为奖励，您可以添加一个 placeholder="Click to see all your options"
<input value="Classic" list="myDatalist" temp="" onmouseover="this.temp=this.value; this.value='';" onmouseout="this.value=this.temp;">
<datalist id="myDatalist" open="open">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>回答by CatStrategist
Question is pretty old, but it's top search on google and there are no answers to be found so I'll add it here.
问题很老了，但它是谷歌上的热门搜索，没有找到答案，所以我会在这里添加它。
To expand datalist on first click you need to set
要在第一次单击时展开数据列表，您需要设置
dataListElement.style.display = "block";
and immediately hide it in next line, so it does not appear as element in your DOM, but it will only expand it under input element.
并立即将其隐藏在下一行，因此它不会在您的 DOM 中显示为元素，但只会在输入元素下展开它。
dataListElement.style.display = "none";
As of today it's not expanded on first click only in Firefox.
截至今天，它并没有在 Firefox 中仅在第一次点击时展开。
回答by writeToBhuwan
HTML:
HTML：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<meta charset=utf-8 />
<title>Input - Datalist</title>
</head>
<body>
<input list="categories" id="categories2" type="text">
<div id="result"></div>
<datalist id="categories">
<option value="Breakfast">Breakfast</option>
<option value="Brunch">Brunch</option>
<option value="Lunch">Lunch</option>
<option value="Dinner">Dinner</option>
<option value="Desserts">Desserts</option>
</datalist>
</body>
</html>
jQuery:
jQuery：
var result='';
$(document).ready(function(){
$('input[type=text]').focus(function(){
$('#categories option').each(function(){
result=result+" "+$(this).val();
});
$('#result').show().html(result);
$('input[type=text]').unbind('focus');
});
$('input[type=text]').blur(function(){
$('#result').hide();
$('input[type=text]').focus(function(){
$('#result').show();
});
});
});
Working JS bin
工作 JS 箱
