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

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

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

<!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中点击空白区域时文本框与隐藏层的问题的更多相关文章

  1. 实例：vue中点击空白区域关闭某个div图层

    <template> <div class="search" ref="searchMain"> <el-input v-mode ...

  2. Android popupwindow 失去焦点或者点击空白区域时消失的解决方法

    先来看下Android API 的这个Methods: public void setOutsideTouchable (boolean touchable) Controls whether the ...

  3. bootstrap 弹出框点击其他区域时弹出框不消失选项设置

    默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...

  4. JS中点击事件冒泡阻止

    JS中点击事件冒泡阻止 解析: 一个div层'out',内含有一个div层'in'.如下: 两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件. 但是 ...

  5. 解决默写浏览器中点击input输入框时，placeholder的值不消失的方法

    html中,placeholder作为input的一个属性,起到了在输入框中占位并提示的作用. 但是有一些浏览器,如chrome,当鼠标点击输入框时,placeholder的值不消失,只有输入数据才消 ...

  6. todolist形式的搜索框，分开组件写的，点击上下键时，框内显示当前选中的内容

    ### 首先  安装react 脚手架 cnpm  install  create-react-app  -g      //只需要在电脑上安装一次就好了,以后不用再下载了 ### 创建项目 crea ...

  7. 【转】Android点击空白区域，隐藏输入法软键盘

    原文网址:http://www.2cto.com/kf/201505/401382.html 很多时候,我们在使用应用时,会出现输入法软键盘弹出的问题,通常情况下,我们默认会使用户点击返回键或者下一步 ...

  8. 微信6.7.4 ios12 软键盘收回时页面不回弹，导致光标位置错乱，再次点击输入框区域时无法focus

    https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800 https://blog.c ...

  9. ASP.NET中页面加载时文本框(texbox控件)内有文字获得焦点时文字消失

    代码如下: <asp:TextBox ID="TextBox1" runat="server" Height="26px" MaxLe ...

随机推荐

  1. linux: 可重入函数与不可重入函数

    1. 可重入函数与线程安全 摘自 多线程和多进程的区别(小结) http://blog.csdn.net/hairetz/article/details/4281931 要确保函数线程安全,主要需要考 ...

  2. android调用音乐播放器，三种方

    小弟想请问一下.怎样在自己写的程序中调用系统的音乐播放器呢. 我在google上搜索了.主要是有两种方法,可是都不是我想要的. 第一种是.使用mp3音乐文件的uri.和intent,进行调用.可是这样 ...

  3. css3 animation动画事件

    当使用css3时,会遇到利用@keyframes来定义动画事件,利用以下3个事件,能够捕捉当前元素的动画: AnimationEnd //动画结束时 AnimationStart  //动画開始 An ...

  4. ASP.NET - TreeView

    设置节点图片 : Windows资源管理器左侧的树型资源结构图中,各节点都有图片连接,例如磁盘的图片.光盘的图片和文件夹的图片等,使资源的表现更加形象.IEWebControls的TreeView控件 ...

  5. CButtonEx的实现

    要想修改CButton类按钮背景颜色和文字颜色,必须利用自绘方法对按钮进行重新绘制.这可以通过定义一个以CButton为基类的新按钮类来实现.以下为具体的实现方法: 方法一: 加入一个新类,类名:CB ...

  6. 8天玩转并行开发——第八天 用VS性能向导解剖你的程序

    原文 8天玩转并行开发——第八天 用VS性能向导解剖你的程序 最后一篇,我们来说说vs的“性能向导",通常我们调试程序的性能一般会使用Stopwatch,如果希望更加系统的了解程序,我们就需 ...

  7. SIP for android

    SIP for android   会话发起协议 Android提供了一个支持会话发起协议(SIP)的API,这可以让你添加基于SIP的网络电话功能到你的应用程序.Android包括一个完整的 SIP ...

  8. DAG上的动态规划

    嵌套矩形问题(最长路及其字典序)有n个举行,选出尽量多的矩阵排成一排,使得除了最后一个之外,每一个矩形可以嵌套在下一个矩形内,并且打印 #include <iostream> #inclu ...

  9. 暂停和屏蔽右键网页中的Flash

    如何暂停网页中的Flash?原理很简单,就是屏蔽Flash的消息即可.屏蔽右键也可以通过此方法 直接贴代码吧,加了注释,很容易就能懂了 新建工程,加一个WebBrowser,再加两个按钮.Flash ...

  10. tc3162目录

    lsbin      dev      lib      proc     tmp      usrboaroot  etc      linuxrc  sbin     userfs   var# ...