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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
来自国外的页面JavaScript文件优化
Dec 08 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
vue 实现单选框设置默认选中值
Nov 07 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 Javascript
vue 如何使用递归组件
Oct 23 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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
人大复印资料处理程序_输入篇
2006/10/09 PHP
也谈截取首页新闻 - 范例
2006/10/09 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
js继承的实现代码
2010/08/05 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
JavaScript多线程详解
2015/08/12 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
Python进行统计建模
2020/08/10 Python
如何将json数据转换为python数据
2020/09/04 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
如何查找和删除数据库中的重复数据
2014/11/05 面试题
人力资源管理专业应届生求职信
2013/09/28 职场文书
法人委托书范本
2014/04/04 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技