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

最新推荐文章于 2021-10-18 23:09:34 发布

疯狂的小鱼

最新推荐文章于 2021-10-18 23:09:34 发布

阅读量1.3k

点赞数

分类专栏：前端知识文章标签： HTML 输入 select

前端知识专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<html>   
<head>   
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
</head>   
<body>   
    <select id="select" οnkeydοwn="Select.del(this,event)" οnkeypress="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" οnclick="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>