js中点击空白区域时文本框与隐藏层的显示与影藏问题


Posted in Javascript onAugust 26, 2013

当文本框获得焦点的时候,在文本框的下方显示一个浮动层。

当用户点击除了文本框和浮动层以外的网页空白处时,要隐藏浮动层。

当用户点击浮动层时,改变文本框的值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
</head> 
<script language="JavaScript"> 
function $(id){ 
return (document.getElementById(id)); 
} function show_div(evt) { 
var od = $('div1'); 
var e = window.event || evt; 
var o = e.srcElement || e.target; 
with (od.style) { 
display = 'block'; 
left = o.offsetLeft + 'px'; 
top = o.offsetTop + o.offsetHeight + 1 + 'px'; 
} 
} 
function hide_div(evt) { 
$('div1').style.display = 'none'; 
} 
function control_bubble(oEvent) { 
//取消冒泡 
oEvent = oEvent || window.event; 
if (document.all) { 
oEvent.cancelBubble = true; 
} else { 
oEvent.stopPropagation(); 
} 
}; 
function fill_input(oEvent) { 
$('text1').value = $('div1').innerHTML; 
control_bubble(oEvent); 
} 
window.onload = function() { 
$("text1").onfocus = show_div; 
document.onclick = function() { 
//隐藏层 
hide_div(); 
}; 
$("text1").onclick = control_bubble; 
$("div1").onclick = fill_input; 
} 
</script> 
<body> 
<br> 
<input type="text" id="text1" value=""> 
<br> 
<div id="div1" align="center" 
style="background:#666;position:absolute;overflow:auto;display:none;padding:50px;">点击我</div> 
</body> 
</html>
Javascript 相关文章推荐
Javascript表单验证要注意的事项
Sep 29 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
使用JS动态显示文本
Sep 09 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
vue+iview实现文件上传
Nov 17 Vue.js
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 #Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 #Javascript
jquery弹出框的用法示例(2)
Aug 26 #Javascript
jquery弹出框的用法示例(一)
Aug 26 #Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 #Javascript
使用js实现雪花飘落效果
Aug 26 #Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 #Javascript
You might like
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
checkbox在vue中的用法小结
2018/11/13 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
Python判断直线和矩形是否相交的方法
2015/07/14 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
个人找工作自荐信格式
2013/09/21 职场文书
金融专业毕业生推荐信
2013/11/26 职场文书
经典商业广告词
2014/03/13 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
求职信范文怎么写
2015/03/19 职场文书
暖春观后感
2015/06/08 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书