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

  • 发表于 3个月前
  • 阅读 ( 26 )
  • 分类:HTML
0 人推荐了该文章

一般情况下,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>

 

本文系转载自其它媒体或用户发布,目的在于信息传递,并不代表本站赞同其观点和对其真实性负责,如有新闻稿件和图片作品的内容、版权以及其它问题的,请联系我们。

2 条评论

默认排序
香草大叔
fgddfgdfgdfgfgfdgfd
香草大叔
hgfhfghfghfgh