Input浮出层的实现
许多应用中都会涉及到Input浮出层,最典型的情况是一个城市选择器,当我们点击一个输入框,下面弹出一个浮层,可以点击浮层里面的城市选择。这个简单的功能我们应该如何实现,其实总体的实现不外乎是在这个input得到焦点时候显示浮层,失去焦点的时候隐藏浮层,在浮层显示的时候,点击浮层里面的城市,进行相应的操作后,让输入框失去焦点以便隐藏浮层。但是我们知道,一旦我们点击这个浮层的时候,这个input便失去焦点了,而input失去焦点浮层又隐藏了,为了不让这个浮层隐藏,我们必须在浮层点击事件之前就做完我们想做的事情,于是我们在其onmousedown的时候就进行操作。
B.on($("address"), "mousedown", function(event){ event = event ? event : window.event; var target = event.target || event.srcElement; if(target.nodeName === 'A'){ $("focusId").value = target.innerHTML; $("focusId").blur(); } if (event.preventDefault){ event.preventDefault(); } else { event.returnValue = false; } return false; });
只要在浮层的onmousedown的时候阻止这个事件,就可以阻止input失去焦点。这个在标准浏览器下是可以的,但是在IE下,这个似乎不行,我们会发现,在IE下,当我们点击这个浮层的时候,input还是失去了焦点,浮层还是隐藏了。为了解决IE下面的问题,我们需要用到IE的setCapture,setCapture的作用是设置一个对象方法的触发范围到整个浏览器,而这个特性在这里我们就能用上了,如果我们在点击这个浮层的时候,把触发范围扩展到整个浏览器,那么这个时候的点击就不会触发input的blur了,比如在一个input获得焦点onfocus的时候,你在IE下点击工具栏的工具按钮,你会发现,input的焦点仍然存在,并没有触发blur。所以利用setCapture,我们就能很好的实现Input的浮层了。
<!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" xml:lang="cn"> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>Input浮出层的实现</title> <style type="text/css"> a { color:#0053aa; text-decoration:none; } a:hover { text-decoration:underline; } .c_address_box { background-color: #fff; font-size: 12px; width: 290px;box-shadow:2px 3px 4px #666;} .c_address_box a { text-decoration: none; } .c_address_hd { height: 24px; border-color: #2C7ECF; border-style: solid; border-width: 1px 1px 0; background-color: #67A1E2; color: #fff; line-height: 24px; padding-left: 10px; } .c_address_bd { border-color: #999999; border-style: solid; border-width: 0 1px 1px; overflow: hidden; padding:10px; } .c_address_ul { width: 100%; margin:0; padding: 4px 0 0; } .c_address_ul li { float: left; height: 24px; overflow: hidden; width: 67px; } .c_address_ul a { display: block; height: 22px; border: 1px solid #FFFFFF; color: #1148A8; line-height: 22px; padding-left: 5px; cursor:pointer; *zoom:1;} .c_address_ul a:hover { background-color: #E8F4FF; border: 1px solid #ACCCEF; text-decoration: none; } </style> </head> <body> <input id="focusId" type="text" /> <div id="address" class="c_address_box" style="display:none;"> <div class="c_address_hd">热门城市</div> <div class="c_address_bd"> <ul class="c_address_ul layoutfix"> <li><a href="###">北京</a></li> <li><a href="###">上海</a></li> <li><a href="###">广州</a></li> <li><a href="###">深圳</a></li> <li><a href="###">合肥</a></li> <li><a href="###">重庆</a></li> <li><a href="###">武汉</a></li> <li><a href="###">大连</a></li> <li><a href="###">厦门</a></li> <li><a href="###">青岛</a></li> <li><a href="###">西安</a></li> <li><a href="###">南京</a></li> <li><a href="###">苏州</a></li> <li><a href="###">杭州</a></li> <li><a href="###">成都</a></li> <li><a href="###">桂林</a></li> <li><a href="###">昆明</a></li> <li><a href="###">贵阳</a></li> <li><a href="###">南通</a></li> <li><a href="###">济南</a></li> <li><a href="###">长沙</a></li> <li><a href="###">福州</a></li> <li><a href="###">宁波</a></li> <li><a href="###">南宁</a></li> </ul> </div> </div> <script type="text/javascript"> var B = function(){ var W = window; W.$ = function(id){ return document.getElementById(id); } return { on: function(obj, type, handler) { if (obj.addEventListener) { obj.addEventListener(type, handler, false); } else if (obj.attachEvent) { obj.attachEvent("on" + type, handler); } else { obj["on" + type] = handler; } }, getTarget: function(event){ event = event ? event : window.event; var target = event.target || event.srcElement; return target; }, preventDefault : function(event){ event = event ? event : window.event; if (event.preventDefault){ event.preventDefault(); } else { event.returnValue = false; } } } }(); B.Focus = function(){ var cm = null; B.on($("focusId"), "focus", function(){ $("address").style.display = ""; $("address").innerHTML += ""; }); B.on($("focusId"), "blur", function(){ $("address").style.display = "none"; }); B.on($("address"), "mousedown", function(event){ var target = B.getTarget(event); if(target.nodeName === 'A'){ $("focusId").value = target.innerHTML; $("focusId").blur(); } if (target.setCapture){ target.setCapture(); cm = target; } B.preventDefault(event); return false; }); B.on($("address"), "mouseup", function(event){ if(cm && cm.releaseCapture){ cm.releaseCapture(); cm = null; } }); }(); </script> </body> </html>