文档章节

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

钢铁炼金术师
 钢铁炼金术师
发布于 2016/06/24 06:07
字数 339
阅读 57
收藏 1
<!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>

 

© 著作权归作者所有

共有 人打赏支持
钢铁炼金术师
粉丝 1
博文 22
码字总数 2541
作品 0
朝阳
程序员
私信 提问
modal-------------Bootstrap

modal是Bootstrap提供的一个“窗口组件”,可以配合js实现弹出窗口的效果。 modal的class是“modal”,其中必须包含三个div部分,属性分别问modal-header,modal-body,modal-footer. 同时mod...

freedonn
2014/11/06
0
0
移动端网页 固定底部但是当填写输入时就不行了

固定在底部的div,页面中有input,当input获取焦点的时候手机会自动弹出输入法什么的,这个时候滑动页面发现后面的那个固定在底部的div已经不再固定底部了,求解决方案,

bm123
2016/09/28
204
0
vue 简单自动补全的输入框

实现一个输入框,输入信息后显示由后台返回的数据,供用户选择,之前用的elm的组件,不过那个有点大。。。简单的情况下自己实现一个也能满足要求。。。应该吧。。。 主题包括一个input用于输...

阿豪boy
02/19
0
0
bootstrap模态框内无法获得焦点怎么办?

测试结果是模态框的问题,不在模态框内的弹出框的输入框是可以获得焦点的 在模态框内效果图: 去除模态框的效果图: 有模态框的完整代码: ico 弹出框 Go! 编号 姓名 性别 年龄 01 name 男 ...

大灯灯
2016/01/29
5.1K
6
又到周末了,我们一起来研究【浏览器如何检测是否安装app】吧

前言 扯淡 这个月比较倒霉,我送了女朋友一台笔记本电脑作为生日礼物,结果15天一过电脑就坏了,悲剧的我还把电脑盒子给扔了!淘宝不给换更不给退 于是被女朋友臭骂了一过星期后,今天本来在...

范大脚脚
2017/12/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

新手也能看懂,消息队列其实很简单

该文已加入开源项目:JavaGuide(一份涵盖大部分Java程序员所需要掌握的核心知识的文档类项目,Star 数接近 16k)。地址:https://github.com/Snailclimb/JavaGuide. 本文内容思维导图: 消息...

阿里云官方博客
13分钟前
0
0
如何在Chrome浏览器中启动deviceready事件(尝试调试phonegap项目)?

我正在开发PhoneGap应用程序,我希望能够在Chrome中调试它,而不是在电话上调试。但是,我在onGetReady()函数中初始化我的代码,该函数在PhoneGap触发“deviceready”事件时触发。由于Chr...

kisshua
今天
9
0
nginx中部署vue打包后的静态文件

如何在nginx中部署静态资源就不描述了, 请看我的这篇博客 将vue脚手架项目打包后的静态文件放到nginx上, 发现有个问题, 即url上有#, 怎么去掉这个#呢. 1 项目中router的mode 路由的mode要为h...

克虏伯
今天
13
0
JS容易理解错误的地方

在这端代码执行的末尾,你会不会hi变量回事函数中的hi了?你会不会认为这不是按引用传递了? 对值传递和引用传递产生质疑了? 1 var hi = {};2 function sayHello(hi) { ...

器石_
今天
9
0
Java开发学习--MongoDB

之前只学过sql,第一次使用非关系型数据库。以前对于关系型数据库与非关系型数据库的概念很模糊,通过这次的学习对这两者有了一个清晰的概念。 主键 在MongoDB中,主键名叫"_id",如果在生成...

微笑向暖wx
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部