Rumah > hujung hadapan web > tutorial js > jquery blur后focus获取不到焦点的解决办法

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

黄舟
Lepaskan: 2017-06-27 11:42:50
asal
1550 orang telah melayarinya

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

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

二:使用场景:

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

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

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

三:代码解释:

当填写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 );     
    }    
})
Salin selepas log masuk

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

Atas ialah kandungan terperinci jquery blur后focus获取不到焦点的解决办法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan