有些人可能已经知道造型选择元素是一场噩梦,如果没有一些javascript技巧,几乎不可能.HTML5中的新数据列表可以用于相同的目的,因为向用户显示选项列表,并且值记录在输入文本字段中.
这里的限制是在用户开始在文本字段中输入内容之前不会出现列表,即使这样,也只显示基于其输入的可能匹配.我想要的行为是,只要对该字段有焦点,整个选项列表就会变得可见.
所以我有这个代码 - 在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>
而我正试着通过这个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);
任何帮助,将不胜感激,
干杯