jquery onblur事件中调用focus方法获取不到焦点问题

  • jquery onblur事件中调用focus方法获取不到焦点问题
jsp
<input type='text' name='name' onblur="test($(this))" /> 
js
function test($ele){
    if(true){
        alert("测试获取焦点");
        $ele.focus();
    }
}

问题描述:
这段代码主要用于表单中实时验证输入的内容是否符合规则,
不符合规则当前输入框获取焦点,方便重新键入。
按说这样写,没有问题,
实际效果却不如人意,alert弹出提示框后,当前input输入框并没有获取焦点。
解决方案:
在setTimeout方法中调用focus方法

jsp
<input type='text' name='name' onblur="test($(this))" /> 
js
function test($ele){
    if(true){
        alert("测试获取焦点");

        setTimeout(function() {
            $ele.focus();
            }, 0);
    }
}   

问题浅析:
是什么原因呢,原来,当前input失去焦点前会调用test方法,
这时,input还没有失去焦点,在test方法中 当前input调用focus方法就会失效。
怎么解决呢,需要了解一下javascript引擎执行任务的原理,
这里简述一下,有什么不对的地方,可以指出。
JavaScript引擎是单线程运行的,并且基于事件驱动,这些事件被放置在一个任务队列中,等待引擎来处理。并且引擎在处理任务时是处理完一个,才会处理另一个任务。
了解了这个原理,问题就凸显出来了,我们执行onblur事件时,input焦点还没有失去,所以再调用focus方法会失效。
使用了setTimeout()定时任务时,javaScript引擎会在任务列表中新添加绑定的任务,这样,调用focus方法的事件,就跟test方法的事件分离,达到了onblur事件执行完成后,input焦点失去,再调用foucs方法获取焦点的效果。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值