トップボックスでWebページのフォーカスを制御する方法

本文の目的を書く.
本稿を書いたのは、androidトップボックスでフォーカスの問題を処理したからです.現在、多くのIPTVの箱の中で、展示されているインタフェースがnative appを使わなくなったのも、仕事が必要なので見てみました.
デフォルトでは、Androidシステムではこの焦点の問題を自分で処理します.以前に接触したいくつかのプラットフォームのシステムでは,Html 5のサポートが不十分であることが分かった.Android4.2システムはwebkitカーネルを採用し、Android 4.4以降Chromiumカーネルに変更され、このカーネルの改善はhtml 5のサポートにとって明らかに最適化されていますが、html 5 testサイトのテスト結果はまだ十分ではありません.GoogleのChromeはHtml 5への支持度はまだ多くありませんが、リモコンがインタフェースを完全に制御できないことに気づきましたので、Androidに任せて自分で処理するのも良い方法ではありません.Androidのソースコードを修正する作業量も必然的に膨大です.
htmlインタフェースリモコンの操作方法
間違いなく、これは問題です.そして自分で昨日少し時間をかけてテストしたところ、UIに要素が限られている場合、javascriptコードでボタンの動作を制御するのも一つの方法であることがわかりました.次は自分で書いたテストdemoです.

        $(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {</span>
            $(<span class="hljs-string">"button[name='but1']"</span>).focus();
            $(<span class="hljs-string">'button'</span>).css(<span class="hljs-string">"width"</span>, <span class="hljs-string">"100px"</span>);
            $(<span class="hljs-string">"button[name='but1']"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {</span>
                $(<span class="hljs-string">"button[name='but1']"</span>).css(<span class="hljs-string">"background-color"</span>, <span class="hljs-string">"red"</span>);

            });
            $(<span class="hljs-string">"button[name='but2']"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {</span>
                $(<span class="hljs-string">"button[name='but2']"</span>).css(<span class="hljs-string">"background-color"</span>, <span class="hljs-string">"blue"</span>);
            });
        });

        <span class="hljs-comment">//  jQuery        </span>
        $(document).on(<span class="hljs-string">'keydown'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> {</span>
            <span class="hljs-comment">//alert(e.which);</span>
            <span class="hljs-keyword">switch</span> (e.which) {
                <span class="hljs-keyword">case</span> <span class="hljs-number">37</span>:
                    <span class="hljs-comment">//keyCode left</span>
                    <span class="hljs-comment">//alert(document.activeElement.id);</span>
                    <span class="hljs-comment">//             1</span>
                    <span class="hljs-keyword">var</span> actId1 = document.activeElement.id;
                    <span class="hljs-keyword">if</span>(actId1 == <span class="hljs-string">'but2'</span>) {
                        $(<span class="hljs-string">"button[name='but1']"</span>).focus();
                    }

                    <span class="hljs-comment">//             2</span>
                    <span class="hljs-comment">/*var isFocus=$("#but2").is(":focus"); 
                    alert(isFocus);*/</span>
                    <span class="hljs-keyword">break</span>;
                <span class="hljs-keyword">case</span> <span class="hljs-number">38</span>:
                    <span class="hljs-comment">// key code up</span>
                    <span class="hljs-keyword">break</span>;
                <span class="hljs-keyword">case</span> <span class="hljs-number">39</span>:
                    <span class="hljs-comment">//keycode right</span>
                    console.log(<span class="hljs-string">"right arrow key pressed!"</span>);
                    <span class="hljs-keyword">var</span> ha = document.hasFocus();
                    <span class="hljs-keyword">var</span> actId = document.activeElement.id;
                    <span class="hljs-keyword">if</span>(actId == <span class="hljs-string">'but1'</span>) {
                        $(<span class="hljs-string">"button[name='but2']"</span>).focus();
                    }
                    <span class="hljs-keyword">break</span>;
                <span class="hljs-keyword">case</span> <span class="hljs-number">40</span>:
                    <span class="hljs-comment">//keycode down</span>
                    <span class="hljs-keyword">break</span>;  
            }
        });

        <span class="hljs-comment">//  js          </span>
        <span class="hljs-comment">/*
        window.onkeydown = function() {
            alert(window.event.keyCode)

        }*/</span>

    <<span class="hljs-regexp">/script></span></code></pre> 
  <pre class="prettyprint"><code class="language-html hljs ">
    <span class="hljs-tag"><<span class="hljs-title">body</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"but1"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"but1"</span>></span>button1<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"but2"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"but2"</span>></span>button2<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">body</span>></span></code></pre> 
  <p>     ，      ，      ，           。。。</p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1175246306294181888"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">
                    
                     
                

興味があるかもしれません

集合フレーム
天子の骄り
java データ構造 集合フレーム

Table Drivenメソッドの例
bijian1013
java enum Table Driven テーブル駆動

Jqueryまとめ
cuishikuan
java jquery Ajax Web jqueryメソッド

オブジェクト向け概念の提出
麦畑の設計者
java オブジェクト向け プロセス向け

linuxポートバインド
トリガーされます
linux

XMLベース構文
忌み嫌う_
xml

Webページに好きなフォントを追加
知了ing
フォントストップウォッチcss

redis範囲クエリーアプリケーション-IPが存在する都市を検索
矮蛋
redis

アルファベットで分類:
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その他
トップページ -
私たちについて -
構内検索 -
Sitemap -
権利侵害苦情
著作権すべてのIT知識ベースCopyRight© 2000-2050 IT知識ベースIT 610.com , All Rights Reserved.
京ICP備09083238号