您的位置：首页 > 其它

页面加载让div元素获取焦点，通过键盘操作焦点切换，安卓电视遥控事件

2018-03-07 11:35 471 查看

背景 需求

最近项目中让写一个h5页面，通过遥控控制焦点的转移。

查了查遥控事件上下左右enter的keyCode和键盘的上下左右enter是一样的。

代码

让非input元素获取焦点的方法，

<div id="focusEle">页面加载让我自动获取焦点</div>

js >：

window.onload=function(){
let focusEle=document.getElementById("focusEle");
focusEle.focus();
}


键盘事件,等同于遥控的上下左右确定（亲测）；

const handleKeyDown = (event) => {
if (event.keyCode == 37 || event.keyCode == 'KEY_LEFT')// 左
{
fun_left(event)
}
if (event.keyCode == 38 || event.keyCode == 'KEY_UP')// 上
{
fun_up(event)
}
if (event.keyCode == 39 || event.keyCode == 'KEY_RIGHT')// 右
{
fun_right(event)
}
if (event.keyCode == 40 || event.keyCode == 'KEY_DOWN')// 下
{
fun_down(event)
}
if (event.keyCode == 13 || event.keyCode == 'KEY_ENTER')// enter
{
fun_enter(event)
}
}


推荐

关于焦点的较好的博客。

后续添加

如果页面是动态生成的，当我在window.onload事件中获取页面初始元素时

window.onload=function(){
console.log(document.body);
//<body>
//  <div id="focusEle">初始时focus元素<div/>
//</body>
document.getElementById("focusEle");//null
}


因为该页面仍然处于异步状态，相关资源仍未就绪，虽然console出了该元素 但是dom操作仍不可进行

解决办法：

//在js脚本加载时 设置定时器
setTimeout(function () {
getDOM();
}, 0);

function getDOM() {
focusEle = document.getElementById("focusEle");
if (focusEle) {
focusEle.focus();
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航