4

重複の可能性:
flex がマウス スクロール イベントとキーボード イベントを必要なときにのみ消費し、それ以外の場合はブラウザーに渡すようにするにはどうすればよいですか?

ホットキーをサポートする Web アプリケーションを作成していますが、アプリケーションは justin.tv ストリーム埋め込みの形でフラッシュをかなり多用しています。ユーザーが再生または停止を押すか、他の方法でフラッシュ フィールドにフォーカスすると、Javascript に到達する前に後続のすべてのキー イベントが消費されるのではないかと心配しています。YouTube のフラッシュ フィールドがこれを行うことを知っているので心配です。フォーカスされると、CTRL+W または CTRL+Tab で別のタブに移動してブラウザ ウィンドウを閉じることができません。

それは YouTube のフラッシュ プレーヤーに固有のものですか? そうでない場合、ホットキーが機能できるように、アプリケーションにフォーカスを維持するために Javascript 側でできることはありますか?

Javascript キー イベントとブラウザ プラグインのトピックに関する追加情報をいただければ幸いです。

PS: 非表示の div オーバーレイを使用して Flash フィールドへのアクセスを完全に拒否できることは承知していますが、埋め込まれたストリームの再生/停止と音量の制御をすべてのユーザーに許可することをお勧めします。

4

2 に答える 2

1

このソリューションは、Windows 上の Firefox でのみテストされています。

主な問題は、Flash からキーボード フォーカスを削除しているようです。フォーカスFlash に設定すると、すでに SO に関するいくつかの解決策があります。

いくつか遊んだ後、jQuery (最新) を使用すると、フォームのテキスト ボックスにフォーカスを向けることができることがわかりました。これにより、Flash からのキーボード入力の制御が奪われます。ソリューションは次のプロセスに従います。

  • ExternalInterfacein Flash は javascript にコマンドを送信します
  • Javascript (この例では jQuery を使用) は、フォームのテキスト フィールドにフォーカスを設定します。
  • Javascript は Flash からフォーカスを削除します (この SO メソッドを使用して Flash オブジェクトにアクセスします)

これがAS3コードです。(これは Flash IDE で設定したので、外部 AS3 ファイルを使用する場合は調整する必要があります):

import flash.events.KeyboardEvent;

stage.addEventListener(KeyboardEvent.KEY_DOWN, displayKey);

function displayKey(keyEvent:KeyboardEvent) {
    /* You can use this commented code for limiting the keys that change focus. */
    /*
    var modifier:String="";
    var keyPressed:String="";

    if (keyEvent.ctrlKey) {
        modifier="Ctrl + ";
    } else if (keyEvent.altKey) {
        modifier="Alt + ";
    } else if (keyEvent.shiftKey) {
        modifier="Shift + ";
    }

    keyPressed=keyEvent.keyCode.toString();

    // make sure to add a textfield to the stage, and name it "myTextField" to make this line work:
    myTextField.text= modifier + keyPressed;
    */

    if (ExternalInterface.available) {
        // Limit the keystrokes using javascript by using this method: 
        // ExternalInterface.call("sendToJavaScript", modifier + keyPressed );

        // Any keystroke will unfocus:
        ExternalInterface.call("sendToJavaScript", "");
    }
}

サンプルの HTML/Javascript コードは次のとおりです。swfobject.js同じディレクトリにファイルが必要です。Flash 要素の id は Flash IDE のデフォルトであり、テキスト入力の id は ですtext1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>testFocus</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen">
            html, body { height:100%; background-color: #ffffff;}
            body { margin:0; padding:0; }
            #flashContent { width:100%; height:100%; }
            .focus {
                border: 10px solid #00ffff;
                background-color: #ff0000;
            }
        </style>

        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"></script>
    </head>
    <body>
        <div id="outerdiv"><form id="form1">
        <input type="text" value="hmmm" id="text1">test</input>
        </form>
        </div>
<div id="flashContent">
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1024" height="768" id="testFocus" align="middle">
                <param name="movie" value="testFocus.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#0033ff" />
                <param name="play" value="true" />
                <param name="loop" value="true" />
                <param name="wmode" value="window" />
                <param name="scale" value="showall" />
                <param name="menu" value="true" />
                <param name="devicefont" value="false" />
                <param name="salign" value="" />
                <param name="allowScriptAccess" value="sameDomain" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="testFocus.swf" width="1024" height="768">
                    <param name="movie" value="testFocus.swf" />
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#0033ff" />
                    <param name="play" value="true" />
                    <param name="loop" value="true" />
                    <param name="wmode" value="window" />
                    <param name="scale" value="showall" />
                    <param name="menu" value="true" />
                    <param name="devicefont" value="false" />
                    <param name="salign" value="" />
                    <param name="allowScriptAccess" value="sameDomain" />
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflash">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </div>

    <script language="JavaScript">

         $(document).ready(function() {

            // just for kicks:
            $('#text1').blur(function(){
                $(this).removeClass("focus");
            });

            // handles form's text input focus (referenced by element's id):
            $('#text1').focus(function() {
                //alert('Handler for .focus() called.');
                $(this).addClass("focus");
                removeFocusOnFlash();
            });

        });

        function removeFocusOnFlash() {

            // Find the Flash container:
            var f = $('#flashContent');

            if (f) { 
                // Hide flash:
                f.tabIndex = 0; 
                f.blur();

                f.removeClass("focus");
            }
        }

        // This is called by the Flash file:
        function sendToJavaScript(value) {

            // set focus on the form's text input field: 
            $('#text1').focus();
        }
    </script>
 </body>
</html>
于 2012-04-24T19:01:06.190 に答える
0

Flashは、ユーザーの操作によってアクティブ化されない限り、重要なイベントを受信しません。ただし、一度発生すると、主要なイベントはDOMに再送信されません。残念ながら、JavaScriptですべてのキーをトラップできたとしても、選択したときにFlashに通知することは一般的にできません。Flashはタブ操作でもフォーカスを受け取りませんが、フォーカスを取得すると、ページに転送されません。たとえば、Ctrl + Oなど、Flashで聞くことができない特定のキーの組み合わせ(ブラウザによって処理されるため)のみがあります。

ただし、Flashで実行されるコードを制御できる場合(少なくとも、外部SWFを独自のSWFにロードできる必要があります)、そこからキーストロークを渡すことができます。タブストップについてはよくわかりません。ブラウザとJavaScriptがを呼び出すことができるかどうかに依存すると思いますfocus()

これがデモです。マウスを右クリックするだけですが、他のキー/マウスイベントでも同様です。

于 2012-04-23T10:46:50.753 に答える