`
desert3
  • 浏览: 2140603 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

onblur后下一个获取焦点的控件判断、html当前活跃控件、jquery版本查看、jquery查看浏览器版本、setTimeout&setInterval

    博客分类:
  • Html
 
阅读更多
需求:
input控件在失去焦点后直接做验证,验证通不过的话,显示相应错误。但是如果失去焦点后点击的下个控件是比较特殊的控件(比如,退出系统),那么不执行验证操作,直接退出系统(防止在系统退出前,还显示验证通不过的错误)。

方法1: 通过下述代码在input的onblur事件中取得当前正在活跃(被点击)的控件,然后根据业务来排除特殊控件()。经测试,本方法适用IE8,在Firefox13、Chrome20测试通不过(target取得的一直是body)。

参考:document.activeElement returns [body] from blur event when focus is changing.
在Firefox下,onfocus事件触发时,document.activeElement取得的是预期的控件,但是在onblur事件触发时,document.activeElement取得的是body,而不是下个获得焦点的控件,官网的解释是,在onblur事件触发时,下个被点击的控件还没有获得焦点,只有在onblur事件触发后,下个控件才得到焦点,因此onblur触发时,document.activeElement返回body
			// 只适用IE
			var target = event.explicitOriginalTarget || document.activeElement;
			alert(target.outerHTML);


方法2:延迟验证(纯Javascript,适用所有浏览器)
由于onblur后特殊控件的点击事件 一定 发生在input控件的onblur事件以后,因此,在onblur事件中是无法直接得到将来的状态:特殊控件是否被点击了
可以通过把onblur要做的验证操作做一小段时间的后移,然后在做真正验证操作之前,检查特殊控件时候被点击,如果没有,继续验证,否则不做验证操作。
	specialClicked = false,
	specialClickEvent: function(){
		specialClicked = true;
		// 特殊事件的操作
	},

	onblurEvent: function(event){
		// 适用所有浏览器,延迟100ms
		setTimeout(function(){onblurEventDelay();}, 100);
	},
	onblurEventDelay: function(event){
		if (!specialClicked) {
			// 这里做真正的验证操作
		}
	},


方法3:jquery 1.6后增加了:focus选择器 Firefox浏览器下,onfocus事件取到的是自己,onblur取到的是空
参考::focus selector

查看当前使用的是哪个版本的jQuery
// Returns string Ex: "1.3.1"
$().jquery;

// Also returns string Ex: "1.3.1"
jQuery.fn.jquery;

查看各种浏览器以及版本信息
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function(){                           
  if($.browser.msie&&($.browser.version == "6.0")){
     alert("<img src='browser/IE.png'>This is MS IE "+$.browser.version);
  }
  else if($.browser.msie&&($.browser.version == "7.0")){
     alert("<img src='browser/IE.png'>This is MS IE "+$.browser.version);
  }
  else if($.browser.msie&&($.browser.version == "8.0")){
      alert("This is MS IE "+$.browser.version);
  }
  else if($.browser.msie&&($.browser.version == "9.0")){
      $("#browser").html("This is MS IE "+$.browser.version);
  }
  else if($.browser.safari){
      $("#browser").html("<This is safari!");
  }
  else if($.browser.webkit){
      $("#browser").html("This is chrome!");
  }
  else if($.browser.mozilla){
      $("#browser").html("This is firefox!");
  }
  else if($.browser.opera){
      $("#browser").html("This is opera");
  }
  else{$("#browser").html("i don't konw!");}    

})
</script>

setInterval:按照指定的周期(毫秒单位)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
setInterval("action()", 5000);

setTimeout:指定的毫秒数后调用函数或计算表达式。setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
setTimeout(action, 5000)
setTimeout("action()", 5000)
function action () {
    // do something
    setTimeout(action, 5000);
}

带参数方法使用setTimeout要注意,setTimeout("函数名("+参数+")",毫秒数),这里的参数只能是字符串形式的,而不能传递一个对象。如果要传递对象,可以参考如下代码:
<script language="javascript">   
   var __sto = setTimeout;   
   window.setTimeout = function(callback, timeout, param) {      
        var args = Array.prototype.slice.call(arguments, 2);      
        var _cb = function() {                      
                       callback.apply(null, args);                
                  }      __sto(_cb, timeout);   }   
        //测试代码   
        function shihuan(a) {     
            alert(a);   
        }   
        function yushibo(a, b, c) {     
            alert(a + b + c);   
        }   
        var a = new Object();   
        window.setTimeout(shihuan, 1000, a);   
        window.setTimeout(yushibo, 2000, a, 6, 7);

// 此例中,setTimeout用法,setTimeout(回调函数, 时间, 参数1, ..., 参数n)。
</script>

用setTimeout实现的每隔固定时间循环执行回调函数,和setInterval的区别:setInterval简单地按照设定的时间间隔回调函数,而setTimeout的时间间隔是设定的时间 + 函数执行消耗的时间。如果要求在每隔一个固定的时间间隔后就精确地执行某动作,那么最好使用setInterval,而如果不想由于连续调用产生互相干扰的问题,尤其是每次函数的调用需要繁重的计算以及很长的处理时间,那么最好使用setTimeout。
分享到:
评论

相关推荐

    jQuery事件及绑定.pptx

    JavaScript+jQuery 网页特效设计 jQuery事件基础 1、jQuery事件概述 jQuery对JavaScript操作DOM事件进行了封装,形成了更好的事件处理机制; 包括常用事件、事件绑定与解绑...bind() 方法:可以向被选元素添加一个或多

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

    介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $("p").blur(); 或$("p").blur(fn)来实现,有需要的朋友可以参考一下

    js日历控件 ,javascript日历控件

    这是一个功能强大的js日期控件,引用时加写: onfocus="showCalendar(this);

    jqueryTable编辑的实现

    jqueryTable编辑的实现 鼠标点击表格即可编辑,onblur时候出发Ajax时间 保存数据(带娇艳功能)。

    简单的JS日历控件

    网上的一个开源的控件,经过本人修改,展示出各式各样的日历控件,使用方便。给input添加一个onclick事件即可,无需再添加onFocus和onBlur事件,样式灵活多样,操作简便。

    详解HTML onfocus获得焦点和onblur失去焦点事件

    主要介绍了详解HTML onfocus获得焦点和onblur失去焦点事件的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    form表单中的onblur事件

    onblur事件,鼠标离开表单input框时触发的事件

    jQuery表单验证之密码确认

    OK这一切都可以用JS来实现,具体思想很简单啦,就是编写事件获取dom节点,判断对象的取值呀? 那么编写什么事件?应该是onblur事件~。而且要为两个密码框都加上失去焦点的blur事件。利用jQuery比较方便勒。 话不多...

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

    文本框失去焦点事件、获得焦点事件 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 onpropertychange 当属性...

    JavaScript完全自学宝典 源代码

    Web浏览器:Microsoft Internet Explorer 6.0及以上版本 Web服务器:Tomcat 5.5.20及以上版本 Java运行时环境:Java5.0 JRE及以上版本 2.本书所附光盘范例 第1章(\c01) 示例描述:演示JavaScript的简单应用及...

    JavaScript笔记

    获得焦点:onfocus 失去焦点:onblur 当事件就发生在获得内容的当前元素上: this直接获得当前内容对象。可以代替当前对象完成一切操作,拥有当前对象的所有属性 前端优化:js中最好用三目运算代替if else 11....

    JavaScript的onfocus与onblur用法

    JavaScript的onfocus与onblur用法文章资源下载,供练习使用

    dreamweaver的各种组件

    Back to my frame 在网页中加入这个action后浏览器将会判断当前的页面是否包含在一 个帧中,如果结果为否则会自动跳转到指定的url地址。 History Go 2.0 这个Behavior的作用是在网页中增加一个“History Go”的...

    老生常谈onBlur事件与onfocus事件(js)

    onBlur事件是光标失去焦点时发生的事件。 可以编如下例子 1.html &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt;使用onBlur事件处理程序&lt;/TITLE&gt; &lt;/HEAD&gt; &lt;BODY BGCOLOR=lavender&gt; &lt;FORM name=F1&...

    js 浏览器事件介绍

    浏览器事件 浏览器事件指载入文档直到该文档被关闭期间的浏览器事件,如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获得焦点事件onfocus 等。 先考察如下的代码: 代码如下: //...

    html的DOM中Event对象onblur事件用法实例

    onblur 事件会在对象失去焦点时发生。 语法如下: 代码如下:onblur=”SomeJavaScriptCode” SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。 支持该事件的 HTML 标签: , , , &lt;area&gt;, , , , ,...

    显示美国时间的日历控件

    一个用纯javascript写的美国时间的日历控件,只需在html标签中使用 onblur(可以改变)='return calendar()' 即可

    js的日历时间控件

    js的日历时间控件 if(typeof Control=="undefined"){Control={}}Control.DatePicker=Class.create({initialize:function(element,options){this.element=$(element);if(dp=this.element.retrieve("datepicker")){dp....

    js在编辑框input下根据输入内容显示匹配内容的下拉列表

    实现一个在编辑框input下根据输入内容显示匹配内容的下拉列表。 实现思路很简单: 将匹配的内容放在一个div中,input输入时把匹配内容的div显示在input下面。 在做的过程中遇到一个棘手的问题: input的onblur中隐藏...

Global site tag (gtag.js) - Google Analytics