问题抛出：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事件中设置的其它控件获取焦点无效，目前无法做到兼容。
分享到：
- 2009-07-31 11:51
- 浏览 7267
- 评论(4)
- 论坛回复 / 浏览 (3 / 6080)
- 查看更多
相关推荐
jQuery提供了`.focus()`和`.blur()`两个方法，分别用于绑定获取焦点和失去焦点的事件。我们可以在这两个事件中添加自定义的动画效果，例如： ```javascript $(document).ready(function() { $('#focusInput').on('...
在网页开发中，不同浏览器对于某些功能的实现可能存在差异，例如JavaScript中的文本框（TextBox...通过利用`createTextRange`和`setSelectionRange`两种不同的方法，以及对浏览器行为的特殊处理，实现了良好的兼容性。
3. **优化交互**：为了提升用户体验，我们还可以考虑在失去焦点（`blur`事件）时取消选中，或者在特定情况下保持选中状态。这可以通过添加额外的JavaScript代码来实现。 ```javascript document.getElementById('...
此外，为了演示如何手动触发blur事件，我们还添加了两个按钮，分别用于触发focus事件和blur事件。 ```html 触发输入域的focus事件 触发输入域的blur事件 ``` ### 结论 通过以上内容，我们可以了解到jQuery的blur...
JavaScript是Web开发中不可或缺的一部分，尤其在处理用户交互时，表单相关事件起着至关重要的作用。本篇文章主要探讨了JavaScript中的两个关键表单事件：获得焦点事件（onfocus）和失去焦点事件（onblur），以及一个...
这种效果通常是由CSS中的背景图像和定位属性实现的，当用户聚焦（focus）或离开（blur）输入框时，背景动画会有所变化，从而产生视觉上的互动反馈。 从提供的代码片段来看，我们可以看到以下关键知识点： 1. **CSS...
`focus`和`blur`是jQuery中的事件，分别在元素获取焦点和失去焦点时触发。`addClass`和`removeClass`用于添加和移除CSS类。 接下来，我们需要定义CSS类`highlight`，以实现高亮效果。这可能包括边框颜色、背景色...
这段代码的核心是监听 `.login-form` 类型的表单中的所有 `input` 元素的 `focus` 和 `blur` 事件。当输入框获得焦点时，它会触发 `focus` 事件，jQuery 选择器 `$(this)` 指向当前获取焦点的 `input` 元素，`...
`.focus()` 方法是当元素获得焦点时触发的事件处理函数，`.blur()` 方法则是在元素失去焦点时触发。两者结合，可以实现在文本框或密码框聚焦和失焦时添加或移除特定CSS类的效果。 这里，`$("#tblReg input[type=...
接着，代码又为所有的输入框元素绑定了focus和blur事件。当输入框获得焦点时，将该输入框的背景颜色设置为"ff9"（淡黄色），实现高亮效果；当输入框失去焦点时，将背景颜色清空，取消高亮。 示例代码中，用户在注册...
对于每个字段，JQuery都绑定了focus、keyup和blur事件，分别在获得焦点时、输入时和失去焦点时进行相应的操作。 #### 账号验证 账号验证包括检查输入框在获得焦点时的提示信息、输入时对账号是否已存在的异步检查...
- focus事件：当输入框获得焦点时，我们添加一个提示样式，并调用函数a()和d()来处理输入。 - keyup事件：当用户输入时，根据条件判断是否显示提示框。如果手机号码长度为0，则隐藏提示框；否则显示提示框并调用...
通过`onFocus`事件处理器并调用`this.blur()`方法，可以在鼠标移入链接时去除图片周围的蓝色边框，这对于提高用户体验非常有帮助。 ### 17. 表单提交至电子邮件 ```html ``` 该表单通过`mailto:`伪协议来直接...