可输入的下拉框
程序员文章站
2022-07-08 23:02:38
...
var Select = { isOpera :(navigator.userAgent.toLowerCase().indexOf('opera') != -1), isIE : (navigator.userAgent.toLowerCase().indexOf('msie') != -1 && !this.isOpera), isIE6 : (navigator.userAgent.toLowerCase().indexOf("msie 6.0") != -1), isSafari : (navigator.userAgent.toLowerCase().indexOf('safari') != -1), getElementPos : function(el){ if (el.parentNode === null || el.style.display == 'none') { return false; } var parent = null; var pos = []; var box; if (el.getBoundingClientRect) { // IE box = el.getBoundingClientRect(); var scrollTop = Math.max(document.documentElement.scrollTop,document.body.scrollTop); var scrollLeft = Math.max(document.documentElement.scrollLeft,document.body.scrollLeft); return { x : box.left + scrollLeft, y : box.top + scrollTop }; } else if (document.getBoxObjectFor) { // gecko box = document.getBoxObjectFor(el); var borderLeft = (el.style.borderLeftWidth) ? parseInt(el.style.borderLeftWidth): 0; var borderTop = (el.style.borderTopWidth)? parseInt(el.style.borderTopWidth): 0; pos = [box.x - borderLeft, box.y - borderTop]; } else { // safari & opera pos = [el.offsetLeft, el.offsetTop]; parent = el.offsetParent; if (parent != el) { while (parent) { pos[0] += parent.offsetLeft; pos[1] += parent.offsetTop; parent = parent.offsetParent; } } if (this.isOpera|| (this.isSafari && el.style.position == 'absolute')) { pos[0] -= document.body.offsetLeft; pos[1] -= document.body.offsetTop; } } if (el.parentNode) { parent = el.parentNode; } else { parent = null; } while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { pos[0] -= parent.scrollLeft; pos[1] -= parent.scrollTop; if (parent.parentNode) { parent = parent.parentNode; } else { parent = null; } } return { x : pos[0], y : pos[1] }; }, inittextfield : function(el){ var selectWidth = el.offsetWidth; textfield = document.createElement("input"); var txtid = "txt"+ el.id; textfield.id = txtid; textfield.style.zIndex = "99999"; if (el.value == "") { textfield.value = "输入或选择"; textfield.style.color = "#ccc"; } else { textfield.value = el.value; } textfield.style.position = "absolute"; textfield.style.top = this.getElementPos(el).y + "px"; textfield.style.left = this.getElementPos(el).x + "px"; textfield.style.border = "none"; if (this.isSafari) { var selectButtonWidth = 18; textfield.style.marginTop = "0px"; textfield.style.marginLeft = "0px"; } else if (this.isOpera) { var selectButtonWidth = 27; textfield.style.marginTop = "4px"; textfield.style.marginLeft = "4px"; } else { if(this.isIE6) this.initIframe(el); var selectButtonWidth = 27; textfield.style.marginTop = "2px"; textfield.style.marginLeft = "3px"; } textfield.style.width = (selectWidth - selectButtonWidth) + "px"; el.parentNode.appendChild(textfield); el.onchange = function() { val = this.options[this.selectedIndex].value; document.getElementById(txtid).value = val; } el.onfocus = function() { document.getElementById(txtid).style.color = "#333"; } textfield.onfocus = function() { this.style.color = "#333"; this.select(); } textfield.onchange = function() { el.options[0].value = el.options[0].text = document.getElementById(txtid).value; el.options[0].selected = true; } }, //解决IE6下面的问题 initIframe : function(el) { var textWidth = el.offsetWidth; var textHeight = el.offsetHeight; var hackFrame = document.createElement("iframe"); hackFrame.setAttribute("src", "about:blank"); hackFrame.setAttribute("scrolling", "0"); hackFrame.setAttribute("tabindex", "-1"); hackFrame.id = "frame" + el.name; hackFrame.style.position = "absolute"; hackFrame.style.width = textWidth -25+ "px"; hackFrame.style.height = textHeight-5 + "px"; hackFrame.style.top = this.getElementPos(el).y + "px"; hackFrame.style.left = this.getElementPos(el).x + "px"; hackFrame.style.marginTop = "3px"; hackFrame.style.marginLeft = "3px"; el.parentNode.insertBefore(hackFrame, el); } }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>可输入的下拉框 - clone(http://hi.baidu.com/hulk168)</title> <script type="text/javascript" src="select.js" charset="gb2312"></script> </head> <body> <select id="user_fromto" style="width: 90px;"> <option value=""></option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州">广州</option> <option value="深圳">深圳</option> <option value="重庆" >重庆</option> <option value="武汉">武汉</option> <option value="成都">成都</option> <option value="长沙">长沙</option> <option value="济南">济南</option> <option value="大连">大连</option> <option value="杭州">杭州</option> <option value="苏州">苏州</option> </select> <select id="user_fromto1" style="width: 90px;"> <option value=""></option> <option value="上海">上海</option> <option value="广州">广州</option> <option value="深圳">深圳</option> <option value="重庆">重庆</option> <option value="武汉">武汉</option> <option value="成都">成都</option> <option value="长沙">长沙</option> <option value="济南">济南</option> <option value="大连">大连</option> <option value="杭州">杭州</option> <option value="苏州">苏州</option> </select> <script type="text/javascript"> window.onload = function(){ Select.inittextfield(document.getElementById("user_fromto")); Select.inittextfield(document.getElementById("user_fromto1")); } </script> </body> </html>
上一篇: 网页界面的一点心得
下一篇: 用SVG实现垂直滚动文本