[js技巧]解决输入框焦点争夺

最新推荐文章于 2022-08-18 15:44:59 发布

kjah_1

最新推荐文章于 2022-08-18 15:44:59 发布

阅读量293

点赞数

分类专栏： javascript web 文章标签： js技巧焦点争夺

javascript 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

web

7 篇文章 0 订阅

订阅专栏

在表单验证时,输入框的验证经常会用到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.οnlοad=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').οnblur=blur;
		$('text2').οnblur=blur;
	}
//-->
</SCRIPT>
 </head>

 <body>
  <input type="text" id="text1"/>
  <input type="text" id="text2"/>
 </body>
</html>