Flex: Workaround for wmode bug

décembre 9th, 2008 · 25 Comments ·

You just turned wmode to “opaque” or “transparent” ?
Your keyboard does weird things in TextInputs and TextAreas ?
You are running Firefox ?
Then you just discovered a pretty flash bug called “THE WMODE BUG“.

Because everyone is complaining to Adobe and Adobe claims it is browsers fault, this issue might not be fixed tomorrow. Thus I’ve decided to create a workaround for non-standard keyboards. It currently supports 5 keyboards: French, Belgian, German, Swiss & Arabic, but the code has been designed to support other keyboards.

Here is an example. If you are using an Azerty keyboard try to type “?” or “@” char in both following text inputs.

view source

Two components have been created, extending TextArea and TextInput Flex components. It currently uses javascript functions getClientLang() and getBrowserName() for default settings. You can also force a keyboard configuration using the forceLang parameter.

You are free to use this code, adding new text components or new keyboards support. If you want your implementation to be published, send me an email: nicolas.cynober-at-pearltrees-dot-com.

Thanks to Hans Van de Velde (Beligan Keyboard), Christian Gambardella (German Keyboard), Ahmad Adel Eldardiry (Arabic Keyboard), Julien Wallen (Swiss-FR keyboard), Meir Rotstein (Hebrew keyboard), Ryszard Chrystyniak (Polish Keyboard & Spark version).

If your keyboard is not fixed yet, and you don’t want to code anything. You can use the following form to submit a list of wrong keys:

updates:

  • 06/2010: Add Hebrew and Polish keyboards.
  • 12/2009: Fix bug for english locale.
  • 05/2009: Stop supporting this code: pearltrees.com now use the default wmode. So this workaround has been used and tested during 5 monthes.
  • 05/2009: Fixing various bugs
  • 05/2009: Add a static const to disable easily the workaround
  • 05/2009: Add Arabic, German & Swiss keyboards.
  • 12/2008: Create a form helping people to submit wrong characters.

Note aux lecteurs: Ça vous est déjà arrivé de ne pas pouvoir faire de “@” dans un site en flash ? Bah c’est ce problème là que j’essaye de résoudre. Problème qui survient uniquement sur certains types de claviers. Aucun problème sur les qwerty US…

Tags: Flex


25 responses so far ↓

  • Pierre-Antoine // déc 9, 2008 at 1:03

    GG ! J’avais ce bug depuis trop longtemps… Non, jdéconne, j’avais jamais vu ça :)

  • You’re welcome !

  • When does the Swiss version comes? ;-)

  • I love it !

    But what about mac/pc keyboard support, does it work ?

  • Yes. It does work. Through javascript the component may render inputs based on operating system.
    Anyway it has not been tested that much on mac.

  • I am loving it!!

  • Hi
    I am trying your fix
    however,
    lang = ExternalInterface.call(”getClientLang”);
    browser = ExternalInterface.call(”getBrowserName”);

    I am readying null, any idea?

  • Indeed. I didn’t comment that part. You have to create two javascript functions called getClientLang and getBrowserName.

    getClientLang must return the lang code. e.g: “fr” or “en”.

    getBrowserName must return the browser name. e.g: “Firefox” or “Explorer”.

    In my case the lang value is generated by the server. And the getBrowserName is using the following code:
    http://www.quirksmode.org/js/detect.html

  • Non capisco dove trovare quelle due funzioni scusa

  • Thank you Nicolas
    Do you know how I can get the language with a js?

  • As I said, I use my server to create dynamically this value. So it depends of what you are using on your server (in my case PHP Zend).
    Basically I use the language sent by the client in its HTTP header.

  • I’m french, but I will try to speek english (sorry).

    you had a good iddea but it doen’t working. I’ve a french keyboard, and I can’t make ë % µ £ ¤ .

    and how do you make for mac keyboards and for linux ? have you tryed on it ? I think not.

    Sorry but your source isn’t perfect.

    good luck ;)

  • Thanks for your input !

    “I can’t make ë % µ £ ¤ .”
    => I will add them in the next release. It should come pretty soon, I’ve fixed several bugs recently.

    “have you tryed on it ? I think not.”
    => I did, but it is less supported than Firefox.

    “Sorry but your source isn’t perfect.”
    => Indeed. Don’t forget it is still a workaround. I have ideas on how to improve it, and no time to test it.

    These components are used on my website, thus you have the guarantee they will be updated and improved.

  • Annabelle // mai 12, 2009 at 5:36

    Hello,

    Frenchy girl this time :)

    This is a good job, I guess this the most advanced script that can be found for now.
    I can’t type following letters : ¨ §
    Is it part of the next release ?

    Thanks a lot :)

  • Oups Annabelle I have forgot this one :( next time maybe…

  • Bonjour Nicolas!
    I used your code to port it to AS 2.0. I left your credits inside of course. I changed the interface a bit since the mexican keyboard allows other keys combinations to write down é, á, etc. Is this ok with you? :)
    Excellent work by the way, like Annabelle said, there is no such good script available yet.

  • Hello Nicolas, quite decent indeed! I’ve been dicing with this bug as well, and you’ve given me a few good ideas to improve on my workaround.

    Unfortunately, I fear I have to add to your troubles, since not only FF is affected. This bug extends to Safari and Chrome as well (pretty much all the webkit browsers)

    This is definitely one of the most annoying bugs I’ve encountered in my years of using both Flash and Flex, and it doesn’t seem like it will get fixed anytime soon. Perhaps we should sit together some time and see if we can’t start a project to find a suitable workaround once and for all :)

  • Bonjour, je suis tombé sur votre code qui m’a l’air bien pratique. Je me le garde sous le coude au cas ou, mais j’ai remarqué que la dernière version de firefox corrige le problème.
    En effet j’ai eu le problème de charactères qui ne passent pas avec FF3.0.13, et j’ai trouvé ce workaround… entremps une mise à jour de firefox vers la 3.5.2, et je n’ai plus de problème.

    Merci en tout cas pour partager votre travail.

  • In firefox 3.5.2, the arrows keys are dispatch to time in wmode (transparent or opaque), whereas in firefox 3.0.* the bug not exist.
    In addition, in chrome the problem of combination already exist.

  • I had the same problem(and head ache) with email fields on a flex contact form using french keyboard.

    Characters like “@” are rendered as”à” and so on.

    For email fields the replace method included in a validateField() method would do the job seamlessly.

    Let’s say I plugged my “validateField” method to the “change” event listener of a TextInput.
    It’d look like this

    private function validateField(event:Event):void{
    var field:TextInput= event.target as TextInput;
    if(field.text.indexOf(”à”)>-1){
    field.text=field.text.split(”à”).join(”@”);
    }
    }

  • Hi,
    great stuff, I have made polish keyboard and also modified the code to work on spark TextInput and spark TextArea.
    You can download FXP from: http://riafreaks.com/?p=286
     

  • @Ryszard thx ! By the way I don’t have the bug anymore (Firefox 3.6.8 and Flash 10.1).

  • Hi Nicolas,
    Thanks for this workaround.
    I’m going to port (je suis pas sur du mot la…) this to a simple as3 code (i don’t use flex).
    I have a 2 little question:
    Why detecting the browser ? just to active or not the tricks ? i think it is not a problem if it is always active
    Why detecting the country of the feyboard ? the keycode change regarding to the country ?
     
    My code work well at this time.
    Can i send you it,  just to have your opinion ?
    thanks a lot

  • Seems like this bug reappeared in FF4 and FF5 … however your workaround does not seem to work ; any idea of how it can be adapted ?
    Thanks
    PH

  • many with whom utilise this kind of counselor figures beautiful boots and shoes by way of ordinarilly space of time develop where meant for operate, they might be maqui berry maqui berry farmers plus gamekeepers by way of example, that would need admission to luciano comfortable shoes animal not even nearby you are overcome progression.

Leave a Comment