在机顶盒上控制网页焦点的方法

写本文目的

之所以写本文,是因为之前在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>

代码很简单,只是一种思路,可能比较局限,有更好的想法欢迎交流下。。。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值