JavaScript使用focus()设置焦点失败的解决方法


Posted in Javascript onSeptember 03, 2014

昨天修改机顶盒上面的EPG页面,遇到一个小问题。用户购买游戏时需要弹出购买确认对话框,对话框的默认焦点规定必须停留在“取消”按键上。很简单的需求,使用JavaScript的focus()方法就可以实现了。简单的代码示例如下:

document.getElementById("cancel").focus()

但是苦逼的是,机顶盒真是一个大坑。由于要兼容所有现存的机顶盒型号,需要对8款机顶盒进行适配。然后就出现问题了!一款中兴B600的机顶盒完全没法将焦点设置到取消按键上。以下是我的解决思路:

首先确认该机顶盒是否支持getElementById()方法以及是否成功获得了ID为“cancel”的元素:测试方法很简单,直接另写了一个 <p id="test">test</p> ,然后在同样的地方获取ID为“test”的元素,并进行了简单的操作document.getElementById("test").innerHTML="Hello"
最后使用了“try...catch(e)...”捕捉“focus()”失败的原因

try(){ 
<span style="white-space:pre"> </span>document.getElementById("cancel").focus() 
}catch(e){ 
<span style="white-space:pre"> </span>alert(e.name + ": " + e.what()); 
}

但是就是很奇怪!以上两步的结果表明该机顶盒支持focus()和getElementById(),但是就是无法设置焦点到弹出的对话框中。

前前后后折腾了一个多小时,最后大BOSS出现了,就简单说了一句话就解决了这个问题!有可能要主动调用flur()将原来的焦点取消掉!

document.getElementById("purchase").flur()

然后就解决了这个问题。不得不感概!在解决这个问题的过程中,自己的思路其实还是蛮正确的,但知识面显然不够。一般程序员和高级程序员的差距除了解决问题的思路方面,也有经验和知识面的差距!

Javascript 相关文章推荐
JavaScript高级程序设计
Dec 29 Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
vue组件间的参数传递实例详解
Apr 26 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 #Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 #Javascript
javascript刷新父页面的各种方法汇总
Sep 03 #Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 #Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 #Javascript
jQuery自带的一些常用方法总结
Sep 03 #Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 #Javascript
You might like
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
PHP写日志的实现方法
2014/11/05 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
vue生命周期的探索
2019/04/03 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
Python三元运算实现方法
2015/01/12 Python
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
个人整改方案范文
2014/10/25 职场文书
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js
Go语言怎么使用变长参数函数
2022/07/15 Golang
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python