点击input,弹出div,丢失Input焦点,关闭div
点击input,弹出div,丢失Input焦点,关闭div
钢铁炼金术师 发表于1年前
点击input,弹出div,丢失Input焦点,关闭div
  • 发表于 1年前
  • 阅读 43
  • 收藏 1
  • 点赞 0
  • 评论 0
<!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>

 

标签: JS HTML CSS
共有 人打赏支持
粉丝 2
博文 22
码字总数 2541
×
钢铁炼金术师
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: