`
周禄康
  • 浏览: 160993 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

解决IE6 页面失去焦点的判断问题

阅读更多

window.onblur和window.onfocus事件,在FireFox、Opera、Chrome、Safari下就非常正确,但在IE就根本不正常。FireFox、Opera、Chrome、Safari下用window.onblur()一句语句就很好地解决了问题,很容易理解也运行地很好。IE在页面没有别的输入元素时也跟其它浏览器一样很正常,但页面有多个输入元素的复杂情况下就死活都不正常。太鄙视IE了。

IE下,焦点从body和其它输入元素(input、textarea等)切换时,IE竟然触发window.onblur或者window.onfocus事件。
window.onblur我试过换成document.body.onblur和this.onblur,甚至去掉,结果一样。

 

下面的代码能很好的解决这一问题:

 

window.onblur = function (e) {
    e = e || window.event;
    if (window.ActiveXObject && /MSIE/.test(navigator.userAgent)) {  //IE
        //如果 blur 事件是窗口内部的点击所产生,返回 false, 也就是说这是一个假的 blur
        var x = e.clientX;
        var y = e.clientY;
        var w = document.body.clientWidth;
        var h = document.body.clientHeight;

        if (x >= 0 && x <= w && y >= 0 && y <= h) {
            window.focus();
            return false;
        }
    }
} 

 

<!-- 导入 在此 参考资料--><!-- end 参考资料-->
分享到:
评论
2 楼 yzjdt 2016-03-07  
lsqwzz 写道
今天也遇到这样的需求了,但是你这种方法有有问题的,window.focus()之后所有的输入框都不以输入了。
gg搜索了一下,相关文章太少,就借你的帖子分享一下好一点的做法。
if(ie){//ie下应该这样搞起。。。
document.onfocusin  = function(){}
document.onfocusout = function(){}
}else{//其它浏览器标准搞法。。
window.onfocus = function(){}
window.onblur = function(){}
}


感谢大神回复,让我很好解决了一个艰难的问题,IE的兼容性实在太烦了。
1 楼 lsqwzz 2012-07-03  
今天也遇到这样的需求了,但是你这种方法有有问题的,window.focus()之后所有的输入框都不以输入了。
gg搜索了一下,相关文章太少,就借你的帖子分享一下好一点的做法。
if(ie){//ie下应该这样搞起。。。
document.onfocusin  = function(){}
document.onfocusout = function(){}
}else{//其它浏览器标准搞法。。
window.onfocus = function(){}
window.onblur = function(){}
}

相关推荐

    jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全

    - 当失去焦点(blur事件)或选择值改变(change事件)时,恢复select的原始宽度,以保持页面布局的稳定。这是通过`el.css("width", el.data("origWidth"));`实现的。 3. **代码优化**: - 代码中有一行被注释掉的...

    使用jQuery快速解决input中placeholder值在ie中无法支持的问题

    本文将详细介绍两种利用jQuery库快速解决input中placeholder值在IE浏览器中无法支持的方法。首先,了解在IE中placeholder无法显示的原因是IE 9以下的版本不支持该属性。为此,需要采用JavaScript脚本来模拟这一功能...

    javascript checkbox/radio onchange不能兼容ie8处理办法

    但在IE8中,`onchange`事件可能不会立即触发,除非该元素失去焦点,例如用户点击了页面上的其他位置。这种行为使得在某些场景下,我们无法实时响应`checkbox`或`radio`的状态改变。 为了解决这个兼容性问题,我们...

    IE下支持文本框和密码框placeholder效果的JQuery插件分享

    失去焦点且输入框为空时,插件会恢复提示文本。对于密码框,由于不能直接修改`type`属性,需要创建一个新的输入框元素并复制原有元素的属性,以达到类似的效果。 为了确保插件能正确运行,开发者还编写了一个`...

    两种方法基于jQuery实现IE浏览器兼容placeholder效果

    该脚本首先定义了一个placeholder函数,该函数通过判断浏览器是否支持placeholder属性,不支持则手动设置提示信息到输入框,并且设置了获得焦点、失去焦点和输入事件的处理函数来管理提示文字的显示和隐藏。...

    JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】

    在本例中,作者选择了`onkeyup`事件,这是因为`onkeyup`事件会在用户每次键入字符并释放键盘按键时触发,与之相对的是`onchange`事件,后者仅在输入框失去焦点且内容发生变化时触发,因此无法实现即时的反馈。...

    KODExplorer 芒果云-资源管理器

    - 弹出层中的弹出层关闭,父窗口失去焦点问题。 - 代码中grunt部分代码拆分开,放到程序外面;提交到git、osc - 桌面:删除alert enter快捷键删除 - install 检测 加入跳过,(只判断用到的函数) 加入多语言 - ...

    让IE下支持Html5的placeholder属性的插件

    相对应地,当input元素失去焦点时,如果其值为空,则重新填充为placeholder的值。 对于开发者而言,实现这一插件需要一定的JavaScript和HTML知识,以及对现代浏览器兼容性问题的理解。插件代码通过$(document)....

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    (3)针对页面自适应问题,本文结合渐进增强以及拥抱流式布局的思想,同时研究利用了移动设备的视口特性,实现跨分辨率、跨设备的页面自适应。 (4)针对系统的功能实现问题,通过结合利用原生态框架与HTML5的跨平台...

    傲游浏览器3(Maxthon) 3.1.8.1000 正式版

    WindowsXP系统下,使用IE6核心时,淘宝商城订单页面自动跳转为兼容模式,会显示"无法购买". 解决在部分团购网站无法顺利支付的问题. 解决拍拍网使用中信银行无法顺利支付的问题. 安全 修正WebkitBugzilla52688安全问题....

    ExtAspNet_v2.3.2_dll

    -Grid中TemplateField生成到页面中控件具有唯一ID,例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件增加GetExpandAllNodesReference和...

    jQuery实现IE输入框完成placeholder标签功能的方法

    描述中提到的“事件响应及针对页面元素属性的动态操作相关实现技巧”是指通过监听输入框的`focus`(获取焦点)和`blur`(失去焦点)事件,以及动态修改元素的属性来实现类似的效果。 在HTML5中,`placeholder`属性...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -Grid中TemplateField生成到页面中控件具有唯一ID,例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件增加GetExpandAllNodesReference和...

    HTML DOM Event 对象

    - `onblur`: 元素失去焦点时触发。 - `onchange`: 表单域内容改变时触发。 - `onclick`: 用户点击元素时触发。 - `onerror`: 加载文档或图像时发生错误时触发。 - `onfocus`: 元素获得焦点时触发。 - `onkeydown`: ...

    Javascript 浏览器事件小结

    失去焦点,获得焦点 change 适用于表单元素,当元素使其焦点的时候判断是否发生改变 click,dblclick 单击,双击 keydown,keyup,keypress 按下键,键离开,按下键的时候触发,注意keypress只对数字字母键有效 ...

    self.attachevent is not a function的解决方法

    这段代码会在元素失去焦点时隐藏一个名为`dd`的元素。然而,`attachEvent`并不被其他浏览器如Chrome或Firefox支持。它们使用标准的`addEventListener`方法来添加事件监听器: ```javascript self.addEventListener...

    26个Jquery使用小技巧

    当输入框失去焦点时,如果其值为空,则恢复为`originalValue`。在文档加载完成后,通过`$("input.text1")`选择器选取所有类名为`.text1`的输入框,并调用`textFill`函数初始化它们。 ### 技巧三:链接自动新窗口...

    window对象集合

    事件方面,Window对象支持多种与用户交互相关的事件,例如`onload`在页面加载完成后触发,`onunload`在页面即将卸载时触发,`onfocus`和`onblur`分别对应元素获取或失去焦点的事件,`onresize`则在窗口大小变化时...

    js事件设计

    - 表单事件:`submit`(表单提交)、`focus`(元素获得焦点)、`blur`(元素失去焦点)、`change`(输入值改变)等。 三、事件冒泡与事件捕获 事件冒泡是指事件从最深的节点开始,逐级向上层节点传播事件。而事件...

Global site tag (gtag.js) - Google Analytics