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

最新推荐文章于 2020-07-27 22:19:43 发布

rush2012

最新推荐文章于 2020-07-27 22:19:43 发布

阅读量510

点赞数

分类专栏：相约ajax 文章标签： IE jQuery JavaScript HTML Firebug ViewUI

相约ajax 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

问题抛出：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" οnblur="iptBlurEvent()" οnfοcus="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" οnblur="iptBlurEvent()" οnclick="iptClickEvent()" οnfοcus="iptFocused()"/>
		<input id="bt1" type="button" value="button" οnfοcus="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事件中设置的其它控件获取焦点无效，目前无法做到兼容。

rush2012

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE和FF下输入框blur事件流程处理的差别引起的focus兼容性问题

问题抛出：FF下，在输入框的blur事件中无法再让该输入框获取到焦点代码1：&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf...
复制链接

扫一扫

专栏目录