当jQuery1.7遇上focus方法的问题


Posted in Javascript onJanuary 26, 2014

jQuery中有一个focus()方法能设置对象的焦点,在1.7以下的版本中,不管对象是不是disabed状态,这个方法都不会报错(只是当disabled时,设置焦点的代码无效),但在1.7版本中,如果对象是disabled状态,这时调用focus()方法时,会直接报异常:

Error: Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus.

意思是:不可见或不可用的元素无法获取焦点。(特别提一下:IE9很NB,能自动识别这种情况,在IE9下不会报错,但是IE9以下的版本全挂。)

<!doctype html>
<html>
 <head>
 <title>测试</title>
 <script src="jquery-1.7.min.js" type="text/javascript"></script>
 <!--<script src="jquery-1.4.4.min.js" type="text/javascript"></script>-->
 <script type="text/javascript">
  function fnTest(){
   //try{
    $("#txt").focus();
   //}catch(e){}
  }  
 </script>
 </head>
 <body>
  <div>
   <input type="text" disabled="disabled" id="txt"/>
   <input type="text" id="txt2"/>
   <input type="button" value="Test" onclick="fnTest()"/>
  </div>
 </body>
</html>

虽然只是一个小变化,但是却很容易造成大杯具,特别是你的js代码,在focus()之后,还有其它很多事情要做时:)

建议:
如果一定要用最高版本的jQuery,最省事的办法莫过于在写xxx.focus()时,加一个try/catch,变成try{xxx.focus();}catch(e){}

Javascript 相关文章推荐
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
利用 JavaScript 构建命令行应用
Nov 17 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 #Javascript
使用javascript为网页增加夜间模式
Jan 26 #Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 #Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 #Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 #Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 #Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 #Javascript
You might like
php中设置多级目录session的问题
2011/08/08 PHP
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
js将json格式内容转换成对象的方法
2013/11/01 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
Python中字典映射类型的学习教程
2015/08/20 Python
Python中Class类用法实例分析
2015/11/12 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
python爬取拉勾网职位数据的方法
2018/01/24 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
python 检查文件mime类型的方法
2018/12/08 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
英国办公用品商店:Office Outlet
2018/04/04 全球购物
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
中学生在校期间的自我评价分享
2013/11/13 职场文书
大学生就业推荐信范文
2013/11/29 职场文书
优秀的导游求职信范文
2014/04/06 职场文书
2014年个人年终总结
2015/03/09 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
困难补助申请报告
2015/05/19 职场文书
教师节老师寄语
2015/05/28 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
一文搞懂Java中的注解和反射
2022/06/21 Java/Android