jquery的blur之后,focus获取不到焦点的解决办法
首页 >  Web前端 > JavaScript  > 2016年11月12日阅(934)评(0

一:问题描述

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上面运行,完美兼容。

原文自:http://phping.sinaapp.com/blog/wp/jquery-focus.html

妙用jQuery的val()方法
基于jQuery实现的智能隐藏、滑动效果的返回顶部代码

有朋自远方来...评论一下呗O(∩_∩)O哈哈~

QQ
昵称*
邮箱*
主页