このソリューションは、Windows 上の Firefox でのみテストされています。
主な問題は、Flash からキーボード フォーカスを削除しているようです。フォーカスをFlash に設定すると、すでに SO に関するいくつかの解決策があります。
いくつか遊んだ後、jQuery (最新) を使用すると、フォームのテキスト ボックスにフォーカスを向けることができることがわかりました。これにより、Flash からのキーボード入力の制御が奪われます。ソリューションは次のプロセスに従います。
ExternalInterface
in 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>