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>
浙公网安备 33010602011771号