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 相关文章推荐
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
vue实现验证码按钮倒计时功能
Apr 10 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 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调用数据库的存贮过程!
2006/10/09 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
php利用header函数下载各种文件
2016/08/24 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
javascript实现图片轮播代码
2019/07/09 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
Python编程之序列操作实例详解
2017/07/22 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
Keras搭建自编码器操作
2020/07/03 Python
详解python 内存优化
2020/08/17 Python
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
老师推荐信
2013/10/28 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
2015年班级元旦晚会活动总结
2014/11/28 职场文书
北京导游词
2015/02/12 职场文书
小学运动会开幕词
2016/03/04 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis