js中点击空白区域时文本框与隐藏层的问题
当文本框获得焦点的时候，在文本框的下方显示一个浮动层。
当用户点击除了文本框和浮动层以外的网页空白处时，要隐藏浮动层。
当用户点击浮动层时，改变文本框的值。
<!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>
js中点击空白区域时文本框与隐藏层的问题的更多相关文章
- 实例：vue中点击空白区域关闭某个div图层
<template> <div class="search" ref="searchMain"> <el-input v-mode ...
- Android popupwindow 失去焦点或者点击空白区域时消失的解决方法
先来看下Android API 的这个Methods: public void setOutsideTouchable (boolean touchable) Controls whether the ...
- bootstrap 弹出框点击其他区域时弹出框不消失选项设置
默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...
- JS中点击事件冒泡阻止
JS中点击事件冒泡阻止 解析: 一个div层'out',内含有一个div层'in'.如下: 两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件. 但是 ...
- 解决默写浏览器中点击input输入框时，placeholder的值不消失的方法
html中,placeholder作为input的一个属性,起到了在输入框中占位并提示的作用. 但是有一些浏览器,如chrome,当鼠标点击输入框时,placeholder的值不消失,只有输入数据才消 ...
- todolist形式的搜索框，分开组件写的，点击上下键时，框内显示当前选中的内容
### 首先 安装react 脚手架 cnpm install create-react-app -g //只需要在电脑上安装一次就好了,以后不用再下载了 ### 创建项目 crea ...
- 【转】Android点击空白区域，隐藏输入法软键盘
原文网址:http://www.2cto.com/kf/201505/401382.html 很多时候,我们在使用应用时,会出现输入法软键盘弹出的问题,通常情况下,我们默认会使用户点击返回键或者下一步 ...
- 微信6.7.4 ios12 软键盘收回时页面不回弹，导致光标位置错乱，再次点击输入框区域时无法focus
https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800 https://blog.c ...
- ASP.NET中页面加载时文本框(texbox控件)内有文字获得焦点时文字消失
代码如下: <asp:TextBox ID="TextBox1" runat="server" Height="26px" MaxLe ...
随机推荐
- CheckBox in ListView
CheckBox in ListView Listview 在android中是经常用的组件,一些特殊情况下,系统提供的list view item 不够用, 不能满足需求,那么就需要自定义listV ...
- Eclipse用法和技巧十七：覆盖父类方法
在学校里面学习java,遇到访问权限修饰符一直停留在public是公有的,外面可以访问:protected是对子类可见的,外部不可以访问:private仅在本类中可见.工作之后,接触到了java代码多 ...
- 通过IP或socket获取对方的MAC地址
1.通过已经连接的socket文件获取: int getpeermac( int sockfd, char *buf ) { int ret =0; struct arpreq arpreq; str ...
- 浅C#中的装箱和拆箱
1.什么是装箱和拆箱? 简单的来说: 装箱就是值类型转换为引用类型:拆箱就是引用类型转换为值类型 值类型,包括原类型(Sbyte.Byte.Short.Ushort.Int.Uint.Long.Ulo ...
- LaTeX新人教程，30分钟从全然陌生到基本入门
1.LaTeX软件的安装和使用 方法A(自助):在MikTeX的官网下载免费的MikTeX编译包并安装.下载WinEdt(收费)或TexMaker(免费)等编辑界面软件并安装. 方法B(打包):在 ...
- hdu 4714 Tree2cycle dp
用树形dp做的,dp[t][i]表示t及其孩子入度都已经小于等于2并且t这个节点的入度等于i的最优解. 那么转移什么的自己想想就能明白了. 关键在于这个题目会暴栈,所以我用了一次bfs搜索出节点的顺序 ...
- 让工程师爱上CMM，实现管理于无形 --- 中标软件CMMI L5之路 （2/2）
上节:见 http://blog.csdn.net/sztiger168/article/details/9142069 使用 青铜器RDM在2011年正式在中标软件上线,将研发业务全面流程化,完全支 ...
- Android菜鸟的成长笔记（12）——Handler、Loop、MessageQueue
原文:[置顶] Android菜鸟的成长笔记(12)——Handler.Loop.MessageQueue 当一个程序第一次启动时,Android会启动一条主线程(Main Thread),主线程主要 ...
- JDWP
JPDA(Java Platform Debugger Architecture) 是 Java 平台调试体系结构的缩写,通过 JPDA 提供的 API,开发人员可以方便灵活的搭建 Java 调试应用 ...
- HDU 4296 Buildings （YY）
题意: 给定N个物体,每个物体有两个参数w,s. w代表它自身的重量: s代表它的强度.现在要把这些物体叠在一起,会产生一个PDV值. PDV解释:(Σwj)-si, where (Σwj) st ...