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

写本文目的

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章