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 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 Javascript
微信小程序实现页面左右滑动
Nov 16 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
yii框架builder、update、delete使用方法
2014/04/30 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
Prototype 工具函数 学习
2009/07/23 Javascript
js 省地市级联选择
2010/02/07 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
python实现简单flappy bird
2018/12/24 Python
简单了解python中的与或非运算
2019/09/18 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
python装饰器使用实例详解
2019/12/14 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
python字典的值可以修改吗
2020/06/29 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
Python的logging模块基本用法
2020/12/24 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
幼儿园感谢信
2015/01/21 职场文书