jquery的blur之后,focus获取不到焦点的解决办法

最新推荐文章于 2023-02-04 09:29:31 发布

AirZH??

最新推荐文章于 2023-02-04 09:29:31 发布

阅读量261

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/justdo/blog/125643

版权

为什么80%的码农都做不了架构师？>>>

一：很多童鞋可能会遇到这种情况：

jquery的blur之后,focus获取不到焦点。

二：使用场景：

用户填写信息的时候，若邮箱为空，则提示请填写邮箱，并将光标置于填写邮箱的文本框里，方便用户的再次输入。

想当然的我们会使用jquey的blur()和focus()两个函数来实现上面的需求：

$("#email").blur(function(){
       if($("#email").val()==''){
            alert('请填写您的邮箱');
            $("#email").focus();    
       }    
})

三：代码解释：

当填写email的文本框失去焦点时，如果填写的邮箱为空，则弹出 '请填写您的邮箱' 的提示，并重新获得该文本框的焦点，方便用户重新输入。

在FF上运行test.html后：会发现，弹框是弹出来了，但是却获取不到焦点，很是奇怪吧，代码明显没有错误呀，在IE上面运行结果正常，既有弹出信息，也会获得焦点。

四：那么你肯定就会想到了，这又是一个兼容的问题了。

是的。FF和IE在兼容性方面的确给我们带来了很多麻烦。

五：出现问题的原因应该是FF和IE的关于blur和focus的机制不一样导致。

FF的focus只能在blur之前。

六：那么该怎么解决这个bug呢？

使用 settimeout做个延迟即可。

修改代码如下：

$("#email").blur(function(){
    if($("#email").val()==''){
        alert('请填写您的邮箱');
        //$("#email").focus();
        window.setTimeout (function(){ document.getElementById ('email'). select();},0 );     
    }    
})

七：分别在IE和FF上面运行，完美兼容。

转载于:https://my.oschina.net/justdo/blog/125643