select下拉框實現輸入功能
阿新 • • 發佈:2018-11-05
select下拉框一般來說只能進行選擇,然而很多應用場景需要支援既能選擇也能輸入的功能。下邊是自己整理的html和js程式碼片段。
<!--HTML片段--> <td> <c:forEach items="${qt009List }" var="list"> <select id="WPAYCARDNO" onkeydown="Select.del(this,event)" onkeypress="Select.write(this,event)"> <option>${list.c_015 }</option> </select> </c:forEach> </td> //js程式碼片段 <script type="text/javascript"> 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); } } </script>