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 相关文章推荐
带左右箭头图片轮播的JS代码
Dec 18 Javascript
对于Form表单reset方法的新认识
Mar 05 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
ES6新特性一: let和const命令详解
Apr 20 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 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
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
javascript实现评分功能
2020/06/24 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
wxpython学习笔记(推荐查看)
2014/06/09 Python
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
python路径的写法及目录的获取方式
2019/12/26 Python
python多线程使用方法实例详解
2019/12/30 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
大专应届生个人简历的自我评价
2013/10/15 职场文书
机电一体化毕业生求职信
2013/11/02 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
法律进社区活动总结
2015/05/07 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书