功能介绍:
1、开始时,面板是隐藏的;
2、输入框获取焦点,面板展示;
3、当点击到面板内区域时,面板不消失;当点击到面板内黄色区域时,面板消失;
4、当点击到面板外区域时,面板消失;
5、当再次点击到输入框时,面板也不消失;
本文只介绍面板展示与消失的操作,查询匹配不做介绍。
可以监听元素的body的mousedown,也可以监听window,如window.οnmοusedοwn=function(){}
<!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" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// window.onmousedown=function(){}//mousedown --->focus
$("body").mousedown(function(event){//mousedown --->focus
var $outObj=$("#outer");
if($outObj.is(":visible")){//可见
var w_out=$outObj.outerWidth();//宽=w+padding+border
var h_out=$outObj.outerHeight();
var os_t=$outObj.offset().top;//宽=w
var os_l=$outObj.offset().left;//宽=w
var x=event.pageX;
var y=event.pageY;
if( x>os_l && x<=(os_l+w_out) && y>os_t && y<=(os_t+h_out) ){
console.log("落在内部");
}else{
console.log("落在外部");
//落在输入框中则显示;落在外,隐藏
var $inputObj=$("#input1");
var w_out_search=$inputObj.outerWidth();//宽=w+padding+border
var h_out_search=$inputObj.outerHeight();//高=h+padding+border
var os_t_search=$inputObj.offset().top;//上距
var os_l_search=$inputObj.offset().left;//左距
if(x>os_l_search && x<=(os_l_search+w_out_search) && y>os_t_search && y<=(os_t_search+h_out_search) ){//落在输入框内部
$outObj.show();
}else{//落在输入框外部
$outObj.hide();
}
}
}else{//不可见
return;
}
});
$("#inner").bind("click",function(event){
event.stopPropagation(); // 阻止事件冒泡
$("#outer").hide();
});
$("#outer").bind("click",function(event){
event.stopPropagation(); // 阻止事件冒泡
});
$("#input1").bind("focus",function(event){
$("#outer").show();
});
});
</script>
<style type="text/css">
body{
background: rgba(123,190,245,1);
}
.box{
border: 1px solid blue;
margin-top: 10px;
margin-left: 100px;
padding: 10px;
width: 400px;
height: 400px;
background: #fcfefd;
display: none;
}
.boxitem{
width: 200px;
height: 200px;
background: yellow;
}
input::-ms-clear {
width: 0;
height: 0;
}
input{
border: none;
color: #596798;
font-size: 24px;
width: 305px;
height: 70px;
margin-left: 100px;
line-height: 70px;
padding-left: 20px;
background: #fcfefd;
border-radius: 15px;
margin-right: 20px;
box-shadow: 0px 0px 8px 0px rgba(173,232,255,0.5), 0px 3px 5px 0px rgba(54,137,211,0.75) inset;
}
</style>
</head>
<body>
<input type="text" name="aa" placeholder="请输入值" value="" id="input1">
<div class="box" id="outer">
点击到这块区域的时候,面板不消失
<div class="boxitem" id="inner">
点击到这块黄色区域时,面板消失
</div>
</div>
</body>
</html>