`

IE和FF下输入框blur事件流程处理的差别引起的focus兼容性问题

IEjQueryJavaScriptHTMLFirebug 
阅读更多

问题抛出：FF下，在输入框的blur事件中无法再让该输入框获取到焦点

 

代码1：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title></title>
		<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
		<script type="text/javascript">
			function iptBlurEvent(){
				$("#div1").append("<p>blur event</p>");				
				$("#ipt1").focus();
			}
			function iptFocused() {
				$("#div1").append("<p>bt focus event</p>");
			}
		</script>
	</head>
	<body>
		<input id="ipt1" type="text" onblur="iptBlurEvent()" onfocus="iptFocused()"/>
		<div id="div1">
		</div>
	</body>
</html>
 

为了测试方便，使用了jquery。对于上面的代码，在输入框随便输入点内容，然后点页面其它地方，这时输入框失去焦点，对于IE和FF，输入的结果是不同的。

 

在IE下div显示的内容为：

1. focus event

2. blur event

3. focus event

输入框会再次获得焦点。而在FF下div中显示的内容为：

1. focus event

2. blur event

输入框没有再次获得焦点。

 

下面这个例子能更好地说明问题。代码2：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title></title>
		<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
		<script type="text/javascript">
			function iptBlurEvent(){
				$("#div1").append("<p>blur event</p>");
				$("#ipt1").focus();
			}
			
			function iptClickEvent() {
				$("#div1").append("<p>before blur</p>");
				$("#bt1").focus();
				$("#div1").append("<p>after blur</p>");
			}
			
			function btFocused() {
				$("#div1").append("<p>button focus event</p>");
			}
			
			function iptFocused() {
				$("#div1").append("<p>input focus event</p>");
			}
		</script>
	</head>
	<body>
		<input id="ipt1" type="text" onblur="iptBlurEvent()" onclick="iptClickEvent()" onfocus="iptFocused()"/>
		<input id="bt1" type="button" value="button" onfocus="btFocused()"/>
		<div id="div1">
		</div>
	</body>
</html>
 

这个例子中，在输入框的click事件中让输入框失去焦点让按钮得到焦点。

 

点击输入框，在IE中，最后得到焦点的是输入框，div显示的结果为：

1. input focus event
2. before blur
3. after blur
4. blur event
5. button focus event
6. input focus event

 

点击输入框，在FF中，最后得到焦点的是按钮，div显示的结果为：

1. input focus event
2. before blur
3. blur event
4. button focus event
5. after blur

 

通过Firebug跟踪调试，得出的结论是，输入框的blur事件发生在其它控件focus事件之前，所以在blur事件中设置的其它控件获取焦点无效，目前无法做到兼容。

分享到：
| hibernate 对 sql server 2005 分页改进
评论
4 楼 cike8899 2014-11-21  
jquery的blur在ie中不能用
$('#poppan__one').blur(function(){
alert("hhhh");
});
3 楼 love2java 2009-08-03  
根据atian25的思路，我使用settimeout解决了问题。

if(isIE()){
document.getElementById(inputId).select();
} else {
window.setTimeout(function(){document.getElementById(inputId).select();},0); 
}

to lifesinger： 尽量不用什么框架啊？
2 楼 lifesinger 2009-08-01  
ie下有个事件 beforedeactive, 可以阻止失去焦点

非ie浏览器，blur事件中 return false 即可

用原生js能快速解决的问题，尽量不用框架
1 楼 atian25 2009-07-31  
ff下 blur在focus之后,
settimeout做个延迟即可
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics