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

更新时间：2014年09月03日 15:30:30 投稿：whsnow

这篇文章主要介绍了JavaScript使用focus()设置焦点失败的一个解决方法 ,需要的朋友可以参考下

昨天修改机顶盒上面的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()

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

您可能感兴趣的文章:

focus
焦点

鸿蒙JS实战之计算器功能开发实例
这篇文章主要给大家介绍了关于鸿蒙Js实战之计算器功能开发的相关资料,计算器是我们生活中经常使用的应用,此项目是基于Harmony实现的简易计算器,需要的朋友可以参考下
2024-02-02
Vue项目中关于全局css的处理
我们在写CSS的时候，会遇到大量相同的属性(比如：margin-top:10px)这种属性几乎每个vue页面都有。这个时候，我们可以把css挂载到全局上，供所有vue页面使用，同时也方便修改。感兴趣的同学可以参考一下
2023-04-04
js实现选项卡内容切换以及折叠和展开效果【推荐】
本文主要介绍了js实现选项卡内容切换以及文字折叠和展开效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
JS画图(非VML)--兼容IE/FF
JS画图(非VML)--兼容IE/FF...
2006-12-12
Js 获取当前函数参数对象的实现代码
这篇文章主要介绍了Js 获取当前函数参数对象的实现代码,需要的朋友可以参考下
2016-06-06
关于js中的鼠标事件总结
下面小编就为大家带来一篇关于js中的鼠标事件总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
Javascript 写的简单进度条控件
2008-01-01
两种JS实现屏蔽鼠标右键的方法
这篇文章主要介绍了两种JS实现屏蔽鼠标右键的方法，浏览者在访问你网页的时候就不能点击右键，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-08-08
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
下面小编就为大家带来一篇浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
TypeScript学习笔记之类型缩小
在TypeScript中若一个变量使用了联合类型,那么当我们使用该变量时必不可少的会去明确的限制该变量的具体类型，这称为类型缩小,这篇文章主要给大家介绍了关于TypeScript学习笔记之类型缩小的相关资料,需要的朋友可以参考下
2022-09-09