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 相关文章推荐
测试你的JS的掌握程度的代码
Dec 09 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
JS实现页面侧边栏效果探究
Jan 08 Javascript
关于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
如何隐藏你的.php文件
2007/01/04 PHP
UCenter Home二次开发指南
2009/05/28 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
JavaScript 事件的一些重要说明
2009/10/25 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
angular实现表单验证及提交功能
2017/02/01 Javascript
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
python实现控制台打印的方法
2019/01/12 Python
详解Python3中ceil()函数用法
2019/02/19 Python
python中while和for的区别总结
2019/06/28 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
应届护士求职信范文
2014/01/26 职场文书
广告词串烧
2014/03/19 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
中秋客户感谢信
2015/01/22 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书