News Flash (April 21, '09): Mike Almond from MadeByPi has ported the JSTextReader to AS3!

Introduction

The JSTextReader works around a bug that occurs with text input in flash when the swf is embedded with the wmode="transparent" parameter (which allows the browser content to show through the background of the swf). This bug occurs in several browsers / flash player combinations (especially earlier browser/flash player versions), albeit manifesting itself differently.

In Firefox, no matter what keyboard layout the user has, the swf receives keystrokes as if a US keyboard were used.

In Safari 3.1.2 on Windows only (tested on XP), and in Google Chrome (0.2.149.29 and 5.0.375.86) on Windows XP the bug appears to manifest the same way as in Firefox.

In Internet Explorer, it appears that we get the "2 for 1" bug, where the true 4-byte unicode characters received by the swf are split into two 2-byte characters (which appear as "garbage").

Solution

The JSTextReader wraps itself around a textfield. It sets up a javascript keystroke listener corresponding to this swf object, and updates the textfield with the keystrokes from javascript since javascript continues to receive correct char data.

This works in Firefox, Internet Explorer, and in later versions of Chrome (5.0.375.86).

In Safari (tested 3.1.2 and 5.0.7533.16 on Windows), there is a bug due to which the keypress event is not fired when flash (with wmode="transparent") absorbs the keyboard events. (keydown is in fact fired, but this does not help since we only receive the keyCode and not the charCode in this case). For this reason, the JSTextReader does not work on such Webkit-based browsers, in which the bug also manifests in some configurations. This problem also affected early Google Chrome (tested 0.2.149.29 on Windows), but in later Chrome versions (tested 5.0.375.86 on Windows) JSTextReader works as designed. If you have ideas on how to make JSTextReader work for these problematic Webkit-based browsers, please tell us.

Demonstration

Below we see two test SWFs embedded with wmode="transparent", which allows the image-tiled background in the browser to show through. The first test SWF has JSTextReader enabled automatically, while the second one does not. Please switch your keyboard to a non-USA keyboard layout (e.g., FR, UK or RU) to see the difference between the SWF in which JSTextReader is enabled and the one in which it is not.




For the first SWF, hopefully everything should work fine. (Note: some languages such as Japanese do not work with JSTextReader, sorry.) For the second SWF, in Firefox you will see the input show up as if you were typing on a keyboard with USA layout. In Internet Explorer, for 4-byte unicode chars such as found in RU (cyrillic), you will see some garbage - each 4-byte char will be split up into two 2-byte chars and then rendered.

Usage Notes

When embedding your swf (which will employ JSTextReader) into the html page, please make sure that 'allowScriptAccess' is set to 'always' (this is to allow the javascript to execute from flash), and that the embed object has a unique id for that page. Please read the release notes in the distribution archive for more details on usage.

Browser Testing

The table below contains results for testing the latest version of JSTextReader in various browser/OS combinations.

BrowserOSFlash Player VersionJSTextReader ResultsBug Manifestation
Internet Explorer
IE 8.0.6001.18928Win Vista10.1.53.64Works.The bug does not manifest.
IE 7.0.6001.18000Win Vista10.1.53.64Works.The bug does not manifest.
IE7WinXP/SP29.0.124.0Works. "2-for-1" bug.
Firefox
FF 3.5.10Win Vista10.1.53.64Works.The bug does not manifest.
FF3Mac OS X/10.4.119.0.124.0Works."US-keyboard" bug.
FF2WinXP/SP29.0.115.0Works."US-keyboard" bug.
Google Chrome
Google Chrome 5.0.375.86Win Vista10.1.53.64Works. "US-keyboard" bug.
Google Chrome 0.2.149.29Win XP/SP29.0.115.0Does nothing and cannot be fixed for reasons described above (keypress is not triggered when flash absorbs key events)."US-keyboard" bug.
Safari
Safari 5.0.7533.16Win Vista10.1.53.64Does nothing and cannot be fixed for reasons described above (keypress is not triggered when flash absorbs key events)."US-keyboard" bug.
Safari 3.1.2Win XP/SP29.0.115.0Does nothing and cannot be fixed for reasons described above (keypress is not triggered when flash absorbs key events). "US-keyboard" bug.
Safari 4.0.5Max OS X/10.5.810.0.42.34Does nothing.The bug does not manifest.
Safari 4 (beta)Max OS X/10.4UnspecifiedReportedly doesn't work (nothing is entered into the text input at all.)The bug does not manifest (?).
Safari 3.1.2Mac OS X/10.4.119.0.124.0 Does nothing. The bug does not manifest. (There are reports however that for some keyboard layouts the "US-keyboard" bug manifests as well.).

Future Features / Suggestions

  • ...

Distribution

The JSTextReader is distributed under the Creative Commons Attribution 3.0 United States License (human readable version).

The JSTextReader is currently being distributed for free. If you have used this code and feel like donating a couple bucks, it will be greatly appreaciated.

Donate  if you found this code useful

Download JSTextReader 1.1a Beta (Sep 09, 2008).

Ports/Extensions

Mike Almond from MadeByPi has ported the JSTextReader to AS3!

Feedback

You can write to me at if you want, but better yet contribute your feedback to the JSTextReader actionscript.org thread. The JSTextReader is still in beta and needs testing with as many browsers and languages as we can get our hands on, so your feedback on this is invaluable. If you test a browser / OS combo not in the Browser Testing table above, please let us know and we'll add the results to the table.