• HOME
  • BLOG
  • Flash
  • Flashでの入力TextFieldの不具合の対処:Javascript promptと連携例

Flashでの入力TextFieldの不具合の対処:Javascript promptと連携例

Mac版、chrome にて、InputタイプのTextFieldに日本語入力ができないみたいなので、
JSのPromptと連携して文字入力させるテスト。


例は特にChrome+Mac制限はしてない。

WonderflはExternalInterfaceがつかえない?みたいなので断念。
テキストフィールドをクリックして入力する流れで↓

This movie requires Flash Player 9

あらかじめHTMLにjqueryが必要 (downloadファイルにはgoogleapiのをinclude済)

http://blog.quq.jp/files/tfjsTextInput/tfjsTextInput.zip

そもそも、Flash側で直せる方法あったらおしえてください。

package {
	
	/**
	 * インポート
	 */
	import flash.events.Event;
	import flash.events.FocusEvent;
	import flash.events.IEventDispatcher;
	import flash.external.ExternalInterface;
    import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFieldType;
	import flash.utils.*;
	import flash.xml.XMLDocument;
	import flash.system.Security;
    import flash.system.Capabilities;
    import flash.system.IME;
    import flash.system.IMEConversionMode;
    
	/**
	 * MacChromeで日本語入力ができないみたいなので
	 * JSのPromptで文字入力をさせる案
	 * ※ 例はとくにChrome制限とはかけていない
	 */
	public class FlashTest extends Sprite {
				
		//ユニークID
		protected var flashid:String = "abcd12345";
				
		//入力フィールド
		protected var inputtf:TextField = new TextField();
				
		/**
		 * コンストラクタ
		 */
        public function FlashTest() {
			this.addEventListener(Event.ADDED_TO_STAGE, onAdded);
        }
		//
		protected function onAdded(e:Event):void{
					
			IEventDispatcher(e.target).removeEventListener(e.type, arguments.callee);
					
			Security.allowDomain(ExternalInterface.call("function() { return location.hostname }"));
					
			
			//TextFieldを準備
			var label:TextField = new TextField();
			label.text = "入力フィールド:";
			this.addChild(label);
			this.stage.focus = label;
			label.x = 100;
			label.y = 80;
			
			inputtf.text = "";
			inputtf.width = 200;
			inputtf.height = 30;
			inputtf.x = 100;
			inputtf.y = 100;
			inputtf.border = true;
			inputtf.type = TextFieldType.INPUT;
			inputtf.addEventListener(FocusEvent.FOCUS_IN, tfCatchFucus);
			this.addChild(inputtf);
			
			//JSのセットアップ
			
				var xmldata:XML = new XML(<xml><![CDATA[
								
					function() {
								
						document.myflashid = '##flashide##';
						document.swftarget;
								
						//Flashへ接続テスト
						//※あらかじめhtmlにjqueryの導入が必要
						document.connectSWF = function(){
							$("object").each(function() {
							//flashide値がマッチするdomを探す
							try{
								if (this.connect(document.myflashid)) {
									document.swftarget = this;
								}
							}catch(e){}						
							});		
						}	
								
						document.openPrompt = function(defaultstr) {
							var result = window.prompt("入力してください。", defaultstr);
							result = !result ? "" : result;
							//flashに通知
							if(document.swftarget){
								document.swftarget.update(result);
							}
						}
								
					}
							
				]]></xml>);
						
				//JSの書き込み
				var xmlstr:String = String(xmldata);
				xmlstr = xmlstr.split('##flashide##').join(this.flashid);
				ExternalInterface.call(xmlstr);
						
				//callback登録
				ExternalInterface.addCallback("connect", onConnectFromJS);
				ExternalInterface.addCallback("update", update);
						
			//接続
			ExternalInterface.call("document.connectSWF");
					
		}	
				
		/**
		 * TextFieldのフォーカスの取得
		 */
		protected function tfCatchFucus(e:FocusEvent):void {
			openJsPrompt();
		}
			
		/**
		 * JSからのConnect 
		 */
		protected function onConnectFromJS(flashid:String):Boolean{
			if (this.flashid == flashid) {
				return true;
			}else {
				return false;
			}
		}
				
		/**
		 * JS Promptを表示する
		 */
		protected function openJsPrompt():void {
			//IME日本語入力をONにする
            if (Capabilities.hasIME)
            {
                try
                {
                    IME.enabled = true;
                    IME.conversionMode = IMEConversionMode.JAPANESE_HIRAGANA ;   
                }
                catch (error:Error){}
            }
			ExternalInterface.call("document.openPrompt", [inputtf.text]);
		}
		
		/**
		 * 更新
		 */
		protected function update(str:String):void{
			inputtf.text = str;
			
			//フォーカスを外す
			var s:FlashTest = this;
			setTimeout(function(){
				s.stage.focus = null;
			},1);
		}
			
    }
}