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


    需求: 
    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。 

    // sample1
    var target = event.explicitOriginalTarget || document.activeElement; 
    alert(target.outerHTML);
    
    
    // sample2
    $("#textID").click(function(){
    var act = document.activeElement.id;
    if(act == "textID" ){
     alert("true");
    }else{
     alert("false");
    }
    } );

     使用jquery获取具有焦点控件的ID:  var act = $(document.activeElement).attr("id");

    方法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。 

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

  • 相关阅读:
    SVN
    git
    电商架构
    django
    linux单项目发布流程
    pandas的基本功能(一)
    Swift 添加自定义响应事件
    Swfit中视图跳转
    移动设备默认不播放媒体文件间接解决办法
    HTML5 使用sessionStorage实现页面返回刷新
  • 原文地址:https://www.cnblogs.com/xdot/p/4837253.html
Copyright © 2020-2023  润新知