js 失去焦点时关闭层实现代码

失去焦点时关闭层练习

#divUserName{
width:200px;
height:30px;
border:1px solid black;
background:#cccccc;
font-size:12px;
margin-top:10px;
}

window.onload = function(){
document.getElementById("tbxUserName").focus();
document.getElementById("tbxUserName").onblur = function(){
document.getElementById("divUserName").style.display = 'none';
}
document.getElementById("tbxUserName").onfocus = function(){
document.getElementById("divUserName").style.display = '';
}

}

这是一个层

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

    input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

    input 输入框获得和失去焦点时隐藏或者显示文字我们先看下效果图 输入框默认状态:  输入框获取焦点状态:  大家可以看效果图的搜索输入框,默认显示着"用户名/Email"的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示"用户名/Email"的提示.是不是很常见?很多搜索.登录.表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的: 复制代码 代码如下: &l

  • jquery获取焦点和失去焦点事件代码

    input失去焦点和获得焦点 鼠标在搜索框中点击的时候里面的文字就消失了. 我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件,因为懒,每次都去写非常的烦,于是就一劳永逸,遇到类似情况就来调用一下就OK 了 相关js代码: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=&

  • 文本框点击时文字消失，失去焦点时文字出现

    文本框点击时文字消失,失去焦点时文字出现 function addListener(element,e,fn){ if(element.addEventListener){ element.addEventListener(e,fn,false); } else { element.attachEvent("on" + e,fn); } } var myinput = document.getElementById("myinput"); addListener(m

  • div失去焦点事件实现思路

    看本文得先了解以下几个事件(摘自w3c). blur事件: 当元素失去焦点时发生 blur 事件. focus事件:focus() 方法用于赋予文本域焦点(也值让某些元素得到焦点事件). tabIndex属性:tabIndex 属性可设置或返回按钮的 tab 键控制次序. 我们都知道blur只是针对form表单控件的,而对于 span , div , li 之类的,则没办法触发它们的动作,现在我们只需要设置一个tabindex属性则可以触发它们的焦点事件了. 真实项目代码: 复制代码 代码如下:

  • jquery-1.2.6得到焦点与失去焦点的写法

    jquery-1.2.6得到焦点与失去焦点的写法 $(function(){ $("input:text,input:password,textarea").focus(function(){$(this).css("background","#CBFE9F");}).blur(function(){$(this).css("background","#FFF");}); }); [Ctrl+A 全选 注:

  • 在js(jquery)中获得文本框焦点和失去焦点的方法

    先来看javascript的直接写在了input上 复制代码 代码如下: <input name="pwuser" type="text" id="pwuser" class="input" value="楼盘账号" onBlur="if(this.value=='') this.value='楼盘账号';" onFocus="if(this.value=='楼盘账号')

  • textarea焦点的用法实现获取焦点清空失去焦点提示效果

    textarea焦点的用法实现获取焦点清空失去焦点提示效果

    效果图: 具体实现: 1.textarea标签内容 复制代码 代码如下: <span style="font-size:14px;"><tr> <td align="right" valign="top">备注:</td> <td><textarea name="" id="remark" cols="" rows=&qu

  • 文本框获得焦点和失去焦点的判断代码

    文本框失去焦点事件.获得焦点事件 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 onpropertychange 当属性改变发生该事件 无论粘贴 keyup onchange等,最为敏感 先来看javascript的直接写在了input上 复制代码 代码如下: <input name="pwuser" type="text" id

  • wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析

    wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析

    昨天在github上发现了一个很好的富文本编辑器wangEditor,一看名字就是中国人写的.这个编辑器好在支持ie6+,另外最重要的一点,它在ie6,7,8上都可以做到失去焦点后仍然可以在原位置插入图片,而且代码量很少.于是很好奇的看看它是怎么做的,裁剪了一下,就这些 var currentRange,_parentElem,supportRange = typeof document.createRange === 'function'; function getCurrentRange()

  • js 失去焦点时关闭层实现代码

    失去焦点时关闭层练习 #divUserName{ width:200px; height:30px; border:1px solid black; background:#cccccc; font-size:12px; margin-top:10px; } window.onload = function(){ document.getElementById("tbxUserName").focus(); document.getElementById("tbxUserNa

  • js点击时关闭该范围下拉菜单之外的菜单方法

    实例如下: $(function(){ $(document).bind("click",function(e){ //id为menu的是菜单 if($(e.target).closest("#menu").length == 0 && $(e.target).closest("input").length == 0){ //点击id为menu之外且id,则触发 hideMenu(); } }) }) 以上这篇js点击时关闭该范围

  • Bootstrap实现input控件失去焦点时验证

    事实上,这是对应的"剪切"下来,然后"粘贴"到你的控件,请参见下面的代码的位置,所谓的透明背景图片: CClientDC CLDC(的getParent()); 的CRect矩形; 的CRect rect1; GetClientRect(RECT); GetWindowRect(rect1); 的getParent() - > ScreenToClient(rect1);如果 (m_dcBk.m_hDC == NULL){ m_dcBk.CreateCompa

  • JS打开层/关闭层/移动层动画效果的实例代码

    css 复制代码 代码如下: body, span, div, td { font-size:12px; line-height:1.5em; color:#849BCA; }#bodyL { float:left; width:84px; margin-right:2px; }a.od { width:80px; height:25px; line-height:25px; text-align:center; font-weight:bold; border: 2px solid #849B

  • JS实现网页上随滚动条滚动的层效果代码

    JS实现网页上随滚动条滚动的层效果代码

    本文实例讲述了JS实现网页上随滚动条滚动的层效果代码.分享给大家供大家参考,具体如下: 这款网页上随滚动条滚动层代码,拖动滚动条即可看到效果,对联广告的代码也都是基于此的,右侧的浮动层同样是可以关闭的稍微加工,便可实现一个浮动广告的代码,运行一下,先看效果吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-fixed-scroll-adv-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3

  • JS动画效果打开、关闭层的实现方法

    本文实例讲述了JS动画效果打开.关闭层的实现方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h

  • js控制输入框获得和失去焦点时状态显示的方法

    本文实例讲述了js控制输入框获得和失去焦点时状态显示的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

  • JS 遮照层实现代码

    JS 遮照层实现代码

    1.先上效果图:2.使用方法: 初始化:Overlayer.Initialize({ZIndex:100,Backgrund:#666,Opacity:80}); 显示:Overlayer.Show();或Overlayer.Initialize({ZIndex:100,Backgrund:#666,Opacity:80}).Show(); 关闭:Overlayer.Close(); 3.代码如下: 公用函数: 复制代码 代码如下: function GetDocumentObject() {

  • JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变

    说在前面:必须是基于支持H5的浏览器才可以 这个 API 本身非常简单,由以下三部分组成. document.hidden:表示页面是否隐藏的布尔值.页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 (注意,页面被其他软件遮盖并不算隐藏,比如打开的 sublime 遮住了浏览器). document.visibilityState:表示下面 4 个可能状态的值 hidden:页面在后台标签页中或者浏览器最小化 visible:页面在前台标签页中 prerender:页面在屏幕外执行预渲染处理

  • js实现匹配时换色的输入提示特效代码

    js实现匹配时换色的输入提示特效代码

    本文实例讲述了js实现匹配时换色的输入提示特效代码.分享给大家供大家参考.具体如下: 这是一款js输入提示特效,当你在输入框中输入字母时,如果下边列出的类别中有与你字母相匹配的,那么这些内容将会变成红色,着重显示出来,与输入框下拉提示是基本是一样的,只是换了一个方式. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tips-cha-color-codes/ 具体代码如下: <html> <head> <meta htt

随机推荐