Jozef Chúťka's blog » input http://blog.yoz.sk My life, my work Fri, 27 Aug 2010 12:43:46 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 TextInput wmode opaque/tranpsarent workaround http://blog.yoz.sk/2010/02/textinput-wmode-opaque-transparent-workaround/?utm_source=rss&utm_medium=rss&utm_campaign=textinput-wmode-opaque-transparent-workaround http://blog.yoz.sk/2010/02/textinput-wmode-opaque-transparent-workaround/#comments Mon, 08 Feb 2010 10:27:56 +0000 Jozef Chúťka http://blog.yoz.sk/?p=1004

Many of you have come accross the horrendous bug that happens with text input in flash when the swf is embedded with wmode=transparent/opaque. It has been much discussed (Firefox Bugzilla entry for this bug, Adobe Forum discussion, etc.), but it seems that in all the years that this bug has existed nothing much has been done. A lot of workarounds have been published, many of them based on custom key mapping etc… My workaround uses html element <input type=”text”> that is placed right over flex <mx:TextInput>. Html element is styled transparent (no design) so user will not notice.

Following application uses wmode “opaque”, try inserting characters (čšň) into first text input (mx:TextInput) and than into second (uses html <input type=”text”> over flash)

Main application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    applicationComplete="init()" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
    import mx.managers.PopUpManager;
    private function init():void
    {
        var window:FakeInputsWindow = new FakeInputsWindow();
        PopUpManager.addPopUp(window, this);
        PopUpManager.centerPopUp(window);
    }
]]>
</mx:Script>
</mx:Application>

FakeInputsWindow

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:html="sk.yoz.html.*"
    layout="vertical" width="400" height="250"
    creationComplete="init()"
    move="moveHandler()">
<mx:Script>
<![CDATA[
    [Bindable]
    private var text2:String = "";

    private function init():void
    {
        ExternalInterface.addCallback("fakeTextInputChange", fakeTextChange);
    }

    private function moveHandler():void
    {
        fakeTextInput.positionChanged = true;
        fakeTextInput.invalidateProperties();
    }

    private function fakeTextChange(value:String):void
    {
        text2 = value;
    }
]]>
</mx:Script>
<mx:Text text='&lt;mx:TextInput ....'/>
<mx:TextInput id="text1" width="300" height="20"/>
<mx:Label text="{text1.text}" />
<mx:Spacer height="10" />
<mx:Text text='&lt;input type="text" ....'/>
<mx:Canvas width="300" height="20">
    <mx:TextInput width="300" height="20"/>
    <html:IFrame width="100%" height="100%" id="fakeTextInput"
        autoResize="true"/>
</mx:Canvas>
<mx:Label text="{text2}" />
</mx:TitleWindow>

lines:

  • 15: javascript-to-flash callback definition fakeTextInputChange (from javascript) sends value into actionscript fakeTextChange()
  • 18: fakeTextInput is IFrame class, that controls position and size of html input, lets correct position on TitleWindow move…
  • 35-39: I placed IFrame over TextInput. IFrame is in fact transparent html input, so what user see is just flex TextInput graphics

Html template file

<!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" xml:lang="en" lang="en" dir="ltr">
<head>
    <title>FakeTextInput</title>
    ...
    <script type="text/javascript" src="js/swfobject.js"></script>
    <script type="text/javascript" src="js/flexiframe.js"></script>
    <script type="text/javascript">
    <!--
        var flashvars = {}

        var params = {
            allowscriptaccess: "always",
            wmode: "opaque"
        };
        var attributes = {
            id: "flash"
        };
        swfobject.embedSWF("Tests.swf", "alternative", "100%", "100%", "10.0.0",
            "flash/expressInstall.swf", flashvars, params, attributes);

        function fakeTextInputChange()
        {
            var input = document.getElementById('fakeTextInput');
            var flash = document.getElementById('flash');
            flash.fakeTextInputChange(input.value);
        }
    //-->
    </script> 

    <style type='text/css'>
    <!--
        body {margin:0px;overflow:hidden;}
        html, body, object, embed {width:100%;height:100%;outline:none;}
        #fakeTextInput {
            position:absolute;
            border:none;
            outline:none;
            padding:0;
            margin:0;
            background:transparent url("images/spacer.gif");
            vertical-align:middle;
        }
    -->
    </style>
</head>
<body>
    <div id="alternative">
        <a href="http://www.adobe.com/go/getflashplayer">
            <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
        </a>
    </div>
    <input type="text" id="fakeTextInput" onkeyup="fakeTextInputChange()"/>
</body>
</html>

Notice lines:

  • 07: import flexiframe.js used for positioning html input on correct place
  • 13: allowscriptaccess must be enabled
  • 14: wmode opaque/transparent is what the source of all evil
  • 22: javascript-to-flash communication
  • 35-42: remove all html input text design and makes it transparent
  • 53: input text definition, you may want to define your own handlers (submit, paste, focus…)
]]> http://blog.yoz.sk/2010/02/textinput-wmode-opaque-transparent-workaround/feed/ 1