写本文目的
之所以写本文,是因为之前在android机顶盒上处理过焦点的问题。目前看到很多IPTV的盒子中,展示的界面不再使用native app,也是因为工作需要,所以尝试看了一下。
默认情况下,在Android系统中会自行处理这个焦点问题。在之前接触过的几个平台的系统中,发现对于Html5的支持不够理想。Android4.2系统采用webkit内核,在Android4.4之后换成了Chromium内核,这个内核的改进,对于html5的支持力度明显优化很多,但是通过html5test网站测试结果仍然不够好。谷歌的Chrome对于Html5的支持度还不多,但是发现遥控器完全无法控制界面,所以交给Android自己来处理也不是一个很好的办法,修改Android源码的工作量也必然是很庞大的。
html界面遥控器怎么操作
毫无疑问,这是个问题。然后自己昨天花了点儿时间测试了一下,发现在UI中元素有限的情况下,通过javascript代码来控制按键行为也是一种方法。下面是自己写的一个测试demo:
<script>
$(function() {
$("button[name='but1']").focus();
$('button').css("width", "100px");
$("button[name='but1']").click(function() {
$("button[name='but1']").css("background-color", "red");
});
$("button[name='but2']").click(function() {
$("button[name='but2']").css("background-color", "blue");
});
});
//使用jQuery监听当前的按键值
$(document).on('keydown', function(e) {
//alert(e.which);
switch (e.which) {
case 37:
//keyCode left
//alert(document.activeElement.id);
//判断当前获取焦点的元素方法1
var actId1 = document.activeElement.id;
if(actId1 == 'but2') {
$("button[name='but1']").focus();
}
//判断当前获取焦点的元素方法2
/*var isFocus=$("#but2").is(":focus");
alert(isFocus);*/
break;
case 38:
// key code up
break;
case 39:
//keycode right
console.log("right arrow key pressed!");
var ha = document.hasFocus();
var actId = document.activeElement.id;
if(actId == 'but1') {
$("button[name='but2']").focus();
}
break;
case 40:
//keycode down
break;
}
});
//使用js监听当前的按键值方法
/*
window.onkeydown = function() {
alert(window.event.keyCode)
}*/
</script>
<body>
<button name="but1" id="but1">button1</button>
<button name="but2" id="but2">button2</button>
</body>
代码很简单,只是一种思路,可能比较局限,有更好的想法欢迎交流下。。。