首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jquery中的onblur和onfocus事件有时在IE浏览器上无法正常工作

在jQuery中,onblur和onfocus事件用于处理元素失去焦点和获得焦点的情况。然而,在IE浏览器中,这两个事件有时会出现无法正常工作的情况。

这个问题通常是由于IE浏览器的事件处理机制与其他浏览器不同所导致的。为了解决这个问题,可以使用jQuery的focusout和focusin事件来替代onblur和onfocus事件。

focusout事件在元素失去焦点时触发,而focusin事件在元素获得焦点时触发。这两个事件在所有主流浏览器中都能正常工作,包括IE浏览器。

以下是使用focusout和focusin事件的示例代码:

代码语言:txt
复制
$(document).ready(function(){
  $("#myInput").focusout(function(){
    // 处理元素失去焦点的逻辑
  });
  
  $("#myInput").focusin(function(){
    // 处理元素获得焦点的逻辑
  });
});

在上面的代码中,当id为"myInput"的元素失去焦点时,focusout事件会触发相应的处理逻辑;当该元素获得焦点时,focusin事件会触发相应的处理逻辑。

推荐的腾讯云相关产品:腾讯云云服务器(CVM),腾讯云云数据库MySQL版(CDB),腾讯云内容分发网络(CDN)。

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,适用于各种应用场景。详情请参考:腾讯云云服务器(CVM)
  • 腾讯云云数据库MySQL版(CDB):提供高性能、可扩展的MySQL数据库服务,适用于各种规模的应用。详情请参考:腾讯云云数据库MySQL版(CDB)
  • 腾讯云内容分发网络(CDN):提供全球加速、高可靠的内容分发服务,加速网站、图片、视频等静态资源的访问。详情请参考:腾讯云内容分发网络(CDN)
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

常见兼容性问题

目前已有很多私有前缀可以不写了,但为了兼容老版本浏览器,可以仍沿用私有前缀标准方法,逐渐过渡。...,当input或者textarea设置了该属性后,该值内容将作为灰字提示显示文本框,当文本框获得焦点或输入内容时,提示文字消失。...对于其兼容性首先需要判断input是否支持placeholder,然后不支持情况下可以通过inputonfocusonblur事件监听来实现placeholder效果。 <!...IE9之前浏览器阻止默认行为需要使用window.event.returnValue = false。直接在事件处理函数return false也能阻止默认行为,只DOM0级模型中有效。...此外,jQuery中使用return false会同时阻止默认行为与事件传播,通常也会封装一个方法来实现默认行为阻止。

1.8K10

java文本框获得输入焦点_文本框获得焦点失去焦点判断代码

文本框失去焦点事件、获得焦点事件 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件...onpropertychange 当属性改变发生该事件 无论粘贴 keyup onchange等,最为敏感 先来看javascript直接写在了input jquery实现方法 对于元素焦点事件...focus():得到焦点时使用,javascriptonfocus使用方法相同。...这里label覆盖文本框上,可以更好控制样式 jquery代码 $(function() { $(‘#searchKey’).focus(function() { $(‘#lbSearch’)....其中placeholder就是其中一个,它可以同时完成文本框获得焦点失去焦点。必须保证inputvalue值为空, placeholder内容就是我们页面上看到内容。

4K40

开发者需要掌握JS事件

1.为对象添加事件2种方式 ①:HTML元素添加对象事件 事件 <meta http-equiv="content-type" content="text...、字体变色 Mouseout:鼠标从元素<em>上</em>,移出元素范围,<em>和</em>mouseover一起使用 3.鼠标点击<em>事件</em>(左键相关<em>事件</em>) click 鼠标单击<em>事件</em> dbclick 鼠标双击<em>事件</em> mousedown/mouseup...,所以<em>在</em><em>IE</em><em>中</em>可以直接使用 event对象 火狐没有全局event对象,必须在发生<em>事件</em>时,产生一个event对象 ,传递默认方法 6.form<em>的</em>提交、重置<em>事件</em> submit/reset onsubmit...、 onsubmit 8.默认<em>事件</em><em>的</em>阻止<em>和</em>传播阻止 使用场景极为常见,超链接用户点击后,取消了不发生跳转。...()用与阻止<em>事件</em>传播,该方法<em>IE</em>不支持,<em>在</em><em>IE</em><em>中</em> cancelBubble

2.4K80

HTML5Web Notification桌面通知

大家在做一些浏览器聊天功能时候,或者一些网站跟在线客服咨询时候,会看到一些消息通知提示,常见浏览器标签页闪烁屏幕右侧消息通知。本篇博客就在这里简单介绍一下如何实现这样功能。...注意:这里需要用到窗口获取焦点失去焦点方法,由于IE其他Chrome及FireFox区别,这里需要用到方法就不一样,具体是:   ChromeFireFox浏览器是windowonfocus..., onblur方法;而IE浏览器则是documentonfocusin, onfocusout方法 下面是代码: <!...// 这里有一个小知识点,就是浏览器窗体获得焦点失去焦点,ChromeFireFox浏览器是windowonfocus, onblur方法;而IE浏览器则是documentonfocusin...点击了允许后,则当前域名网站就被允许该电脑出现通知弹框,以谷歌浏览器为例,这时依次点击:设置——高级——内容设置——通知,就可以允许下面看到刚才点击了允许通知站点地址,如图: ?

2.3K60

html 输入框输入事件,input输入框事件「建议收藏」

,’keyCode=’+event.keyCode) } 执行结果: 其实这个过程并没有很意外,唯一感觉不太对劲是 onchange 事件并不是每次输入框值改变时候触发,而是失去焦点时候,并且...onblur 之前触发; 2、说说这些事件 onfocus 并没有什么特别的,就是当焦点转移到(点击,tab切换) input 框上边时候触发; onkeydown 键盘按下时候触发,但是此时按下值并没有被输入到...input ,所以,此时 value 没有值,或者说它值 只能是之前旧值 另外,此时可以阻止按键默认事件; onkeypress 按键在按下之后,并且是按键松开之前触发 keydown...,抢了onchange 饭碗; 另外,这东西是新IE9以下不支持,需要使用 onpropertychange; 还有这货,仅仅在input, textarea 支持; onkeyup 按键松开之后触发...反正我是不敢;失去焦点之后触发,明明是 onchange 为什么是失去焦点后触发,还偏偏比 onblur 快; 能获取新到 value,不能拿到 keycode;此时,不可以阻止按键默认事件

6K30

HTML事件属性--DOM

打开一个新页面或者刷新时候触发 demo查看 相当于onload,加载页面时触发,但是不同浏览器触发有所不同 第一次加载页面时,onpageshowie浏览器不触发,其他情况都触发 11.onresize...} 13.onpopstate 当浏览器窗口记录改变时运行脚本, 14.onredo 当文档执行撤销时触发事件 二、form事件属性 由html表单内触发事件,通常使用在form元素 1.onblur...=myfun()事件,当input失去焦点时候产生什么样效果 demo查看 2.onfocus 元素获得焦点时触发事件onblur相反 demo查看 3.onchange 当元素值被改变时候触发事件...当表单获得输入时可以触发事件 触发发不了脚本 6.onforminput 当表单获得用户输入时触发事件无法触发 浏览器不支持 6.oninput 当元素获得用户输入时触发事件 当输入框输入或者删除时都会触发...按下任意字母数字键时触发,但系统按钮,箭头功能无法识别 3.onkeyup 松开任何之前按下键盘时触发 demo查看 四、mouse鼠标事件 利用鼠标触发事件 1.onclick 鼠标点击元素触发事件

3.8K20

快速学习-登录功能实现-页面错误提示

③ 常用事件: onload onclick onblur onfocus onmouseover onmouseout BOM ① Borwser Object Model 浏览器对象模型...异步处理 而异步处理指的是我们浏览网页同时,通过AJAX向服务器发送请求,发送请求过程我们浏览网页行为并不会收到任何影响,甚至主观感知不到向服务器发送请求。...当服务器正常响应请求后,响应信息会直接发送到AJAX,AJAX可以根据服务器响应内容做一些操作。 使用AJAX异步请求基本完美的解决了同步请求带来问题。...这里需要稍微注意一下,XMLHttpRequest对象并没有成为标准,但是现在主流浏览器都支持该对象,而一些如IE6老版本浏览器创建方式有一些区别,但是问题不大。...7.4.4 使用JQuery框架来发送异步请求 JQuery是当前比较主流 JavaScript 库,封装了很多预定义对象实现函数,帮助使用者建立有高难度交互页面,并且兼容大部分主流浏览器.

1.9K30

XSS挑战第一期Writeup

实际#后面的部分是不会被算在QueryString里面的。所以这里实际长度只有23。提交者巧妙使用outerHTML方式将整个URL都写入到了DOM。但是在这里不得不提是,浏览器差异问题。...虽然Internet Explorer(IE8下测试)Chrome(最新版本)当中,这种方法都可以直接把URL写到DOM,但是Firefox会将URL编码过内容写入到DOM,导致无法完成HTML...所以实际操作过程,如果条件允许的话,可能需要我们调用一些可以对URL进行解码JS函数,先对URL进行一次解码再写入到DOM,进而提高payload通用性。..."+"29 Galaxy答案: "onblur=javascript:window.onblur=al%00ert;throw"1 该挑战者使用绕过IE8/IE9 filter一个技巧(%00),...e3rp4y答案: "onfocus=window.onblur=top["aler"%2b"t"];throw"1 来自0×00有趣答案: ()&xss="onclick=a=location.search

847100

Html Notification通知简单使用(转)

这里有一个小知识点,就是浏览器窗体获得焦点失去焦点,ChromeFireFox浏览器是windowonfocusonblur方法;而IE浏览器则是documentonfocusin, onfocusout...方法,因此有: window.onfocus = function() { }; window.onblur = function() { }; // for IE document.onfocusin...然而,这种提示有个致命缺陷,就是用户浏览器要一直是张开。比方说用户浏览器最小化,标题就看不见,自然就无法及时get到有新消息信息。...兼容性 IE14以及其他桌面浏览器都支持Web Notification,目前移动端支持情况并不好,Android部分支持,iOS Safari浏览器全军覆没(至9.3版本): ?...其他属性值 除了Notification.permission外,Notification还有很多其他只读属性值,但是,基本上面的options参数一致,返回值也是options默认值合并值(

2.7K10

事件高级

封装一个函数,函数判断浏览器类型: ?...5.有些事件是没有冒泡,比如onbluronfocus. onmouseenter. onmouseleave 6.事件冒泡有时候会带来麻烦,有时候又会帮助很巧妙做某些事件,我们后面讲解。...事件对象兼容性处理 事件对象本身获取存在兼容问题: 标准浏览器浏览器给方法传递参数,只需要定义形参 e 就可以获取到。... IE6~8 浏览器不会给方法传递参数,如果需要的话,需要到 window.event 获取查找。...1.8 事件委托 事件冒泡本身特性,会带来坏处,也会带来好处。 什么是事件委托 把事情委托给别人,代为处理。 事件委托也称为事件代理, jQuery 里面称为事件委派。

1.5K41

React 17 要来了,非常特别的一版

(此时原生 DOM 事件早已冒出document了): react 16 delegation 因此,不同版本 React 组件嵌套使用时,e.stopPropagation()无法正常工作(两个不同版本事件系统是独立...() 另一方面,将事件系统从document缩回来,也让 React 更容易与其它技术栈共存(至少事件机制少了一些差异) 向浏览器原生事件靠拢 此外,React 事件系统还做了一些小改动,使之更加贴近浏览器原生事件...: onScroll不再冒泡 onFocus/onBlur直接采用原生focusin/focusout事件 捕获阶段事件监听直接采用原生 DOM 事件监听机制 注意,onFocus/onBlur下层实现方案切换并不影响冒泡... 传播过程之外事件对象所有状态会被置为null,除非手动e.persist()(或者直接做值缓存) React 17 去掉了事件复用机制,因为现代浏览器下这种性能优化没有意义...; } 在后来迭代却没对forwardRef、memo加以检查, React 17 补上了。

1.5K20

分享前端开发常用代码片段

作者:WEBING segmentfault.com/a/1190000014700549 一、预加载图像 如果你网页需要使用大量初始不可见(例如,悬停)图像,那么可以预加载这些图像。 ?...二、检查图像是否加载 有时为了继续脚本,你可能需要检查图像是否全部加载完毕。 ? 你也可以使用 ID 或 CLASS 替换 标签来检查某个特定图像是否被加载。...三、自动修复破坏图像 逐个替换已经破坏图像链接是非常痛苦。不过,下面这段简单代码可以帮助你。 ? 四、悬停切换 当用户鼠标悬停在可点击元素时,可添加类到元素,反之则移除类。 ?...实现 $('#ele').click(function(event){ //获取鼠标图片坐标 console.log('X:' + event.offsetX+'\n Y:' + event.offsetY...还有一种方法是(前缀$)变量中高速缓存元素 ? 链式高速缓存方法都是 jQuery 可以让代码变得更短更快最佳做法。

1.1K51

分享前端开发常用代码片段-值得收藏

一、预加载图像 如果你网页需要使用大量初始不可见(例如,悬停)图像,那么可以预加载这些图像。 ? 二、检查图像是否加载 有时为了继续脚本,你可能需要检查图像是否全部加载完毕。 ?...四、悬停切换 当用户鼠标悬停在可点击元素时,可添加类到元素,反之则移除类。 ? 只需要添加必要 CSS 即可。更简单方法是使用 toggleClass() 方法。 ?...实现 $('#ele').click(function(event){ //获取鼠标图片坐标 console.log('X:' + event.offsetX+'\n Y:' +...三十一、链式插件调用 jQuery 允许“链式”插件方法调用,以减轻反复查询 DOM 并创建多个 jQuery 对象过程。 ? 通过使用链式,可以改善 ?...还有一种方法是(前缀$)变量中高速缓存元素 ? 链式高速缓存方法都是 jQuery 可以让代码变得更短更快最佳做法。

1.9K31

BOMDOM

能够对页面所有事件做出反应(鼠标点击事件,鼠标移动事件等) 查找标签(css一样,你想操作某个标签需要先找到它) 直接查找 document.getElementById 根据...,是不是应该应用在用户某些操作啊,如果你用户点击了某个内容,让它变变颜色之类,给用户一些好看效果或者指示效果啊,所以这就要和我们下面要学事件结合起来要做事情,通过事件+上面的样式修改来实现...事件   HTML 4.0 新特性之一是有能力使 HTML 事件触发浏览器动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript。...常用事件(就先讲一下onfocusonblur,onclick,onchange吧,其他回头再说~~) onclick 当用户点击某个对象时调用事件句柄。...因为我们无法给一个不存在元素绑定事件。     window.onload事件文件加载过程结束时候触发。

52910
领券