点击input，弹出div，丢失Input焦点，关闭div

最新推荐文章于 2021-06-27 21:22:01 发布

weixin_33811539

最新推荐文章于 2021-06-27 21:22:01 发布

阅读量658

点赞数

文章标签： python

原文链接：https://my.oschina.net/SuperRgy/blog/700192

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			#pop {
				position: absolute;
				border: solid 1px #000;
				min-height: 200px
			}
		</style>
	</head>

	<body>
		<input type="text" style="width:300px" onclick="showPop(this)" onblur="hiddenPop()"/> 
		<script>
			//得到input的位置，用于确定要弹出来的div的位置
			function getPos(ipt) {
				var p = {
					x: 0,
					y: 0
				};
				//ipt.offsetLeft;input的左内间距
				p.x += ipt.offsetLeft;
				//ipt.offsetLeft;input的上内间距
				p.y += ipt.offsetTop;
				return p
			}

			function hiddenPop(){
				//获取pop,pop是弹出的div,用于判断是否创建div
				var pop = document.getElementById('pop');
				console.log(pop);
				if (pop != null) {
					pop.style.display='none';
				}
			}
			function showPop(ipt) {
				//获取pop,pop是弹出的div,用于判断是否创建div
				var pop = document.getElementById('pop');
				//如果pop不存在,说明是第一次点击，则创建div
				if (pop == null) {
					//获取p，p是位置点
					var p = getPos(ipt);
					//创建div
					pop = document.createElement('div');
					//设置div的id
					pop.id = 'pop';
					//设置div的样式：
					//left:' + p.x + 'px设置div的左内间距；
					//(p.y + ipt.offsetHeight) + 'px 设置div的上内间距，上内间距=input的上内间距+input的高；
					//(ipt.offsetWidth - 2) + 'px'设置div的宽度
					pop.style.cssText = 'left:' + p.x + 'px;top:' + (p.y + ipt.offsetHeight) + 'px;width:' + (ipt.offsetWidth - 2) + 'px';
					//把div插入到当前文档体中
					document.body.appendChild(pop);
					//pop中加一个关闭按钮完全是为了方便测试，没什么实际作用
					pop.innerHTML = '<input type="button" onclick="closePop(this)" value="关闭"/>'
				}
				//如果存在，说明不是第一次点击，直接修改显示属性
				else {
					pop.style.display = 'block'
				}
			}
			function closePop(closeBtn){
				closeBtn.parentNode.style.display='none';
			}
		</script>
	</body>

</html>

转载于:https://my.oschina.net/SuperRgy/blog/700192