当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 相关文章推荐
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
JavaScript eval() 函数介绍及应用示例
Jul 29 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
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 获取远程网页内容的函数
2009/09/08 PHP
php实例分享之二维数组排序
2014/05/15 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
php for 循环使用的简单实例
2016/06/02 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
JavaScript 无符号右移运算符
2009/04/17 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
Python异常学习笔记
2015/02/03 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
Python sep参数使用方法详解
2020/02/12 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
用python批量下载apk
2020/12/29 Python
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
公司会计主管岗位责任制
2014/03/01 职场文书
视光学专业自荐信
2014/06/24 职场文书
2014年司机工作总结
2014/11/21 职场文书
实习介绍信模板
2015/01/30 职场文书
通知书大全
2015/04/27 职场文书
安全教育观后感
2015/06/17 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript