Ady*_*gom 21 javascript jquery html5
有些人可能已经知道造型选择元素是一场噩梦,如果没有一些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);
任何帮助,将不胜感激,
干杯
小智 10
我使用以下代码:
<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:
设置焦点并记住 - global - 变量中的旧值
mousedown:
删除值并显示datalist(内置功能)
mouseup:
恢复旧值
然后选择新值.
找到这个朝向组合框的可接受的解决方法.
小智 8
我希望你喜欢这个解决方案：
我在输入字段中添加了一个“temp”属性以进行存储，一旦鼠标悬停在输入字段上，它就会将其当前值保存在 temp 中，然后删除该值以允许打开数据列表。
在 mouseout 时，它将从变量 temp 恢复字段的值。这个解决方案在我测试过的 Chromium 下效果很好。
作为奖励，您可以添加一个 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>wri*_*wan -3
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：
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();
});
});
});
工作 JS 垃圾箱
http://jsbin.com/urupit/4/watch
| 归档时间： |
|
| 查看次数： |
15990 次 |
| 最近记录： |