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 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
ES6关于Promise的用法详解
May 07 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
Vue组件为什么data必须是一个函数
Jun 11 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
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
node.js中的console.trace方法使用说明
2014/12/09 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
js实现随机数小游戏
2019/06/28 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python threading模块操作多线程介绍
2015/04/08 Python
Python实现统计文本文件字数的方法
2017/05/05 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
python学生管理系统开发
2019/01/30 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
Python列表切片常用操作实例解析
2019/12/16 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
应届毕业生个人自我评价
2013/09/20 职场文书
预备党员党校学习自我评价分享
2013/11/12 职场文书
毕业生个人求职信范例分享
2013/12/17 职场文书
留学顾问岗位职责
2014/04/14 职场文书
土地转让协议书
2014/04/15 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python