您的位置：首页 > Web前端 > HTML

html中的select下拉框具有输入功能

2017-01-01 18:49 597 查看

转载：https://www.douban.com/note/395390036/

一般情况下，select下拉框是只能选择，不能用来输入内容的。当select下拉框中没有要选择的信息项时，可以直接在select中输入自己想要得信息项，在输入信息项时，不改变select下拉框中原有的信息项。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<select id="select" onkeydown="Select.del(this,event)" onkeypress="Select.write(this,event)">
<option value=""></option>
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
</select>
<input type="button" value="获取选择值" id="test" onclick="test();"/>
<script>
var Select = {
del : function(obj,e){
if((e.keyCode||e.which||e.charCode) == 8){
var opt = obj.options[0];
opt.text = opt.value = opt.value.substring(0, opt.value.length>0?opt.value.length-1:0);
}
},
write : function(obj,e){
if((e.keyCode||e.which||e.charCode) == 8)return ;
var opt = obj.options[0];
opt.selected = "selected";
opt.text = opt.value += String.fromCharCode(e.charCode||e.which||e.keyCode);
}
}

function test(){
alert(document.getElementById("select").value);
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航