[js技能]解决输入框焦点争夺
日期：2014-05-16 浏览次数：20308 次
[js技巧]解决输入框焦点争夺
在表单验证时,输入框的验证经常会用到onblur事件,当验证不通过,有时会需要调用focus()把焦点移回输入框,就是不输对就不许其他操作那种,虽然应用场景不多,在实际使用时会产生一个焦点争夺的问题:
?
当两个输入框里都是验证不通过的值,焦点在a输入框,当用户点击b输入框时,a输入框的onblur验证方法调用focus()方法触发b输入框的onblur事件,又会要求把焦点设置到b上两个输入框的onblur事件轮流触发,造成焦点争夺死锁.
?
以下示例通过增加一个标志控制事件的执行,并通过setTimeout置回标志,让onblur事件先触发.
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<SCRIPT LANGUAGE="JavaScript">
<!--
window.onload=function(){
var $=function(s){return document.getElementById(s)}
var blur=function(){
var disableEvent=false;
return function(){
if(disableEvent)return;
var that=this;
alert(1)
disableEvent=true;
if(navigator.userAgent.indexOf("Firefox")>0){//ff浏览器focus要在blur之后才能有效调用,onblur相当于onbeforeblur,所以需要setTimeout方法
setTimeout(function(){that.focus()},0);
}else{
this.focus();
}
setTimeout(function(){disableEvent=false;},0);
}
}()
$('text1').onblur=blur;
$('text2').onblur=blur;
}
//-->
</SCRIPT>
</head>
<body>
<input type="text" id="text1"/>
<input type="text" id="text2"/>
</body>
</html>
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
