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 相关文章推荐
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
微信小程序日期选择器实例代码
Jul 18 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 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
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
PHP微信分享开发详解
2017/01/14 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
Python selenium 三种等待方式解读
2016/09/15 Python
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
Python迭代和迭代器详解
2016/11/10 Python
5款非常棒的Python工具
2018/01/05 Python
python3+requests接口自动化session操作方法
2018/10/13 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
Python pandas用法最全整理
2019/08/04 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
网站设计师的岗位职责
2013/11/21 职场文书
教师个人读书活动总结
2014/07/08 职场文书
工作时间证明
2015/06/15 职场文书
公司员工管理制度
2015/08/04 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
Django使用redis配置缓存的方法
2021/06/01 Redis
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers