现在的位置: 网页制作教程网站制作经验 >正文
jquery相关教程

Firefox浏览器下jquery的focus获取不到焦点的解决办法

发表于2017/1/7 网站制作经验 0条评论 ⁄ 热度 2,771℃

近来在做一个注册表单时,发现jquery的focus获取不到焦点的问题。

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

focus焦点

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

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

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

以上代码在ie浏览器上运行正常,达到预期效果。但在Firefox浏览器下,对话框是弹出来了,但是却获取不到焦点。

代码是没有问题,那考虑到的应该是兼容问题了。FF和IE在兼容性方面的确给我们带来了很多麻烦。

出现这个问题的原因应该是FF和IE的关于blur和focus的机制不一样导致。查找资料发现,Firefox的focus只能在blur之前。

知道了原因,利用settimeout延迟是解决问题的好办法。

修改代码如下:

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

经测试,IE和Firefox下完美通过。

  • 暂无评论