文档章节

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

钢铁炼金术师
 钢铁炼金术师
发布于 2016/06/24 06:07
字数 339
阅读 47
收藏 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
vue 简单自动补全的输入框

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

阿豪boy
02/19
0
0
又到周末了,我们一起来研究【浏览器如何检测是否安装app】吧

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

范大脚脚
2017/12/21
0
0
移动端网页 固定底部但是当填写输入时就不行了

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

bm123
2016/09/28
197
0
bootstrap模态框内无法获得焦点怎么办?

测试结果是模态框的问题,不在模态框内的弹出框的输入框是可以获得焦点的 在模态框内效果图: 去除模态框的效果图: 有模态框的完整代码:

大灯灯
2016/01/29
4.3K
6

没有更多内容

加载失败,请刷新页面

加载更多

下一页

spring-boot | 日志

引言 好久不见,都还好吗? 大家都知道,我一般都是带来实用的东西,这次也一样,我们来试试项目开发中的日志处理。 理论知识 1、为什么要用日志?你是否因为项目出现问题,查找日志文件定位...

成都_小冯同学
19分钟前
0
0
dubbo下的补偿实现(一)

背景 由于前面几篇文章涉及的问题 分布式事务的思考 在我们微服务的场景下 各种本地事务都没有办法控制的很好。 A服务调用B服务 当B服务成功提交之后 A发生了异常 这种情况下要如何处理呢??...

Mr_Qi
28分钟前
2
0
HTML显示json字符串并且进行格式化

通过pre标签进行格式化展示,使用JSON.stringify()方法转换。 代码如下:   <html> <head> <title>HTML显示json字符串并且进行格式化</title> </head> <body> <p id="show_p">{ "name": "B......

writeademo
49分钟前
0
0
LNMP——php-fpm

php-fpm的pool •vim /usr/local/php/etc/php-fpm.conf //在[global]部分增加include并删除我们之前www池子 • include = etc/php-fpm.d/*.conf • mkdir /usr/local/php/etc/php-fpm.d/ • ......

chencheng-linux
52分钟前
0
0
TensorFlow layers slim 模块搭建cnn对mnist分类,比较bn效果

shape变化 (?, 784)(?, 28, 28, 1)(?, 14, 14, 8)(?, 7, 7, 8)(?, 1, 1, 8)(?, 8)(?, 10) 结果对比,基本上还是有点用的 0.91725457 0.9232 0.9548 0.95530.9177273 0.9234 0....

阿豪boy
55分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部