文档章节

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

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

 

© 著作权归作者所有

共有 人打赏支持
钢铁炼金术师
粉丝 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

vue 简单自动补全的输入框

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

阿豪boy ⋅ 02/19 ⋅ 0

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

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

范大脚脚 ⋅ 2017/12/21 ⋅ 0

移动端网页 固定底部但是当填写输入时就不行了

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

bm123 ⋅ 2016/09/28 ⋅ 0

bootstrap模态框内无法获得焦点怎么办?

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

大灯灯 ⋅ 2016/01/29 ⋅ 6

JQ focus blur focusin focuseout

查阅资料后发现通常默认情况下div是没有focusable属性的,因此在给div元素绑定了事件的时候,不管有没有聚集焦点,函数中的事件都不会发生,所以在绑定的div标签后面添加tabindex="1",加上f...

喝牛奶对身体好 ⋅ 2016/08/01 ⋅ 0

easyui中窗口关闭,弹窗次数却发生累计

通过按钮,打开一个窗口,在窗口中,点击选择按钮,弹出一个警告框。关闭警告框,并且关闭窗口,重新打开窗口操作,在此点击选择按钮,弹框却弹出两次。 代码如下: createAppArcTempWin = ...

路人甲蹉跎 ⋅ 2016/07/12 ⋅ 0

jq的validate插件验证时机问题

设置了失去焦点时触发验证,页面中给input输入框和select选择框加了required属性,进入页面点击一下空白的地方,select马上触发了校验给出了提示。为什么我还没有选择select框,它就触发了失...

TheFlash ⋅ 2015/05/15 ⋅ 0

双击div变成可编辑区的简单实现

window.onload = function() { // 加载的时候就被初始化,此处的this是指id为oldDiv的div document.getElementById("divElement").ondblclick = function() { toReplace(this) } } // 此函数......

刘谱_smile ⋅ 2016/08/01 ⋅ 0

Js实现点击超链接弹出层,效果仿Discuz登录!

主要应用到的是dispaly:none 和 dispaly:block;来控制实现的; 登录这里还有一种写法 登录 两种效果是一样的; View Code

布雷泽 ⋅ 2011/04/25 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

来自一个优秀Java工程师的简历

写在前面: 鉴于前几天的一份前端简历,虽然带着很多不看好的声音,但却帮助了很多正在求职路上的人,不管评论怎么说,我还是决定要贴出一份后端的简历。 XXX ID:357912485 目前正在找工作 ...

颖伙虫 ⋅ 18分钟前 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部