`
desert3
  • 浏览: 2160569 次
  • 性别: 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插件 IP地址输入框

    总之,"JQuery插件 IP地址输入框"提供了一个方便的解决方案,用于在网页上创建用户友好的IP地址输入控件,尽管在IE浏览器下可能存在一些挑战,但通过适当的优化和调整,可以克服这些限制,实现全平台的良好体验。

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

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

    简单的JS日历控件

    JavaScript(JS)日历控件是一种常见的前端交互元素,它为用户提供了一个直观的方式来选择日期,常见于表单输入、事件预订或时间相关的功能。在这个开源项目中,经过修改的控件提供了一种简单且高效的方式来集成到...

    form表单中的onblur事件

    另一个用例是自动保存功能,用户在输入内容后离开输入框,系统自动保存当前状态。 总之,`onblur`事件是HTML表单处理中的一个重要工具,它允许开发者在用户离开特定元素时执行代码,增强了用户界面的响应性和交互性...

    jQueryNumPad是一款移动端友好的jQuery数字键盘插件

    jQuery NumPad插件是基于流行的JavaScript库jQuery构建的,它的主要功能是提供一个可自定义的数字键盘界面,用户可以直接在移动端设备上进行数字输入,而无需与全尺寸的虚拟键盘进行交互。这不仅优化了用户体验,还...

    WEB开发中 日期控件

    在WEB开发中,日期控件是一种常见的用户界面元素,它允许用户方便地选择或输入日期。日期控件的实现方式多样,通常包括JavaScript库、HTML5原生支持以及各种前端框架提供的组件。在这个场景中,描述中提到的...

    带 时间 的 日期 控件

    例如,`new Date()`可以创建一个表示当前日期和时间的新实例,`getDate()`、`getMonth()`、`getFullYear()`则分别用于获取日期、月份和年份,而`getHours()`、`getMinutes()`和`getSeconds()`则用于获取时间部分。...

    HTML5-input表单控件调用代码_html5_表单_input_代码_控件_

    2. `onblur`:失去焦点时触发。 3. `onchange`:值发生改变且失去焦点时触发。 4. `oninput`:值发生改变时立即触发。 六、实战示例 以下是一个包含多种`input`类型的简单表单: ```html &lt;label for="email"&gt;...

    对FCKeditor HTML编辑器 封装成自定义控件

    “对FCKeditor HTML编辑器封装成自定义控件”这个标题意味着我们将探讨如何将FCKeditor,一个流行的开源HTML文本编辑器,整合到自定义的用户界面组件中。FCKeditor(现已更名为CKEditor)是Web开发中常用的富文本...

    显示美国时间的日历控件

    在描述中提到,“一个用纯javascript写的美国时间的日历控件”,这意味着这个日历功能并未依赖任何外部库,如jQuery或其他JavaScript框架,而是完全独立实现的。开发者通过在HTML元素上添加`onblur`事件监听器,并...

    解决浏览器会自动填充密码的问题

    但是这个解决方案在谷歌和火狐上均有bug,下面来一个一个解决。 1.’autocomplete=”off”‘在Chrome中不起作用解决方案 网站项目中,有登录和注册的弹框,在除chrome的浏览器中一切都ok,一旦在谷歌浏览器中,问题...

    JavaScript日期控件

    我们可以创建一个新的Date实例来获取当前时间,或者指定一个具体的日期和时间。例如: ```javascript var currentDate = new Date(); ``` 这将创建一个表示当前日期和时间的新Date对象。如果我们想要设置特定日期,...

    简单易用的日期控件FCKeditor

    3. 在FCKeditor中添加DatePicker:通过JavaScript代码,我们可以在FCKeditor的工具栏上添加一个按钮,点击后弹出DatePicker。这可能涉及到自定义FCKeditor的配置文件(如fckconfig.js),并在其中注册新的按钮和相关...

    jqueryTable编辑的实现

    在本文中,我们将深入探讨如何实现`jQuery Table`编辑功能,包括鼠标点击表格单元格进行编辑,以及在失去焦点(onblur)时通过Ajax保存数据。此外,我们还将提及与实现此功能相关的`jQuery`和`Table`技术。 首先,`...

    HTML 控件 鼠标事件,HTML 控件 鼠标事件,HTML 控件 鼠标事件

    默认情况下,这会打开浏览器的上下文菜单,但开发者可以通过这个事件自定义上下文菜单。 #### 8. `onmousewheel` 当用户在元素上滚动鼠标滚轮时触发。可用于实现页面滚动、缩放图片等功能。 #### 9. `onselect` 当...

    公共js判断,js控件

    在JavaScript编程中,公共js判断和js控件是构建高效、用户友好的Web应用程序的关键组成部分。这些工具通常用于实现各种验证功能,确保用户输入的数据符合预期格式和规则,从而提高用户体验并减少服务器端的压力。...

    转载JQuery.txt

    在第一个示例中,代码实现了这样一个功能:页面加载完成后,按钮上会显示一个倒计时(默认为10秒),并且按钮处于禁用状态。每过一秒,按钮上的数字减一,直到倒计时结束,按钮恢复可点击状态,并显示“确定”。 ``...

    jQuery事件及绑定.pptx

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

    xhEditor网页编辑器(基于jQuery技术)

    xhEditor是一款基于jQuery库的开源网页编辑器,它为网站开发者提供了强大的文本编辑功能,让用户可以在网页上实现类似Word的富文本编辑体验。这款编辑器设计简洁、易用,支持多种格式的文本输入,包括字体、字号、...

    jquery editable plugin--点击编辑文字插件

    5. **兼容性**:jQuery Editable Plugin对主流浏览器有良好的兼容性,包括Chrome、Firefox、Safari、Edge以及旧版本的Internet Explorer。 在实际应用中,我们可以通过以下几个步骤来使用这款插件: 1. **引入依赖...

Global site tag (gtag.js) - Google Analytics