jQuery-通过监控mousedown事件，输入框即时展示查询结果面板，获取焦点和失去焦点时，面板展示与否操作

最新推荐文章于 2023-02-16 15:13:13 发布

佛佛ง

最新推荐文章于 2023-02-16 15:13:13 发布

阅读量395

点赞数

分类专栏： jQuery学习笔记

本文链接：https://blog.csdn.net/LzzMandy/article/details/98865599

版权

jQuery学习笔记专栏收录该内容

29 篇文章 1 订阅

订阅专栏

功能介绍：

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>

佛佛ง

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery-通过监控mousedown事件，输入框即时展示查询结果面板，获取焦点和失去焦点时，面板展示与否操作

功能介绍：1、开始时，面板是隐藏的；2、输入框获取焦点，面板展示；3、当点击到面板内区域时，面板不消失；当点击到面板内黄色区域时，面板消失；4、当点击到面板外区域时，面板消失；5、当再次点击到输入框时，面板也不消失；本文只介绍面板展示与消失的操作，查询匹配不做介绍。可以监听元素的body的mousedown，也可以监听window，如window.onmousedo...
复制链接

扫一扫