Input elemnts in HTMLLoader are readonly in adobe AIR

Question

Lets say i have a html file that contain a form:

<form method="post" action="url">
    <input type="text" id="fullname" />
    <input type="text" id="bodyText" />
    <input type="submit">
</form>

we have load this html file using HTMLLoader inside an swf file.

_htmlLoader = new HTMLLoader();
_htmlLoader.paintsDefaultBackground = false;
var req:URLRequest = new URLRequest(urlValue);
_htmlLoader.load(req);
_stage.addChild(_htmlLoader);

After loading this Swf file using Loader inside main application, text boxes are readonly and can't type in it. But we can change focus of them using Mouse.

var loader1:Loader = new Loader();
loader1.load(new URLRequest("path to file.swf"));
// ...
this.addChild(loader1);
// ...

What is the problem?

Do the HTML form elements work fine (i.e. accept keyboard input) if you directly view the first SWF (the one that has the HTMLLoader) (as an AIR application's main SWF) without loading it inside another SWF? If so, then the issue you mentioned looks like a bug in AIR. — Ashutosh, Nov 22 '11 at 05:57

Tommy Blackbird · Answer 1 · 2017-03-29T13:06:01.140

The proposed solution ("wait the DOMContentLoaded event before addChild") didn't work for me.

Instead it worked using the FULL_SCREEN_INTERACTIVE display state. According to Adobe's documentation about FULL_SCREEN:

"keyboard interactivity is enabled for mobile devices"

(I guess it's it's disabled others profiles like Desktop).

While FULL_SCREEN_INTERACTIVE:

Specifies that the Stage is in full-screen mode with keyboard interactivity enabled. As of Flash Player 11.3, this capability is supported in both AIR applications and browser-based applications.

So in my case the solution was:

_stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE

Andrew Odri · Accepted Answer · 2011-12-30T10:41:50.557

Is the HTMLLoader being attached after the Event.COMPLETE event has been fired? It may even be worth waiting for the HTMLLoader's document to fire a DOMReady event before attaching it the stage.

Try something like this:

_htmlLoader = new HTMLLoader();
_htmlLoader.paintsDefaultBackground = false;
var urlRequest:URLRequest = new URLRequest(urlRequest);
_htmlLoader.addEventListener(Event.COMPLETE, completeHandler);
_htmlLoader.load(urlRequest);

function completeHandler(event:Event):void { _htmlLoader.window.document.addEventListener("DOMContentLoaded", readyHandler); }

function readyHandler(event:Event):void { _stage.addChild(_htmlLoader); }

The Flex documentation about handling HTML events mentions this:

When a listener refers to a specific DOM element, it is good practice to wait for the parent HTMLLoader to dispatch the complete event before adding the event listeners. HTML pages often load multiple files and the HTML DOM is not fully built until all the files are loaded and parsed. The HTMLLoader dispatches the complete event when all elements have been created.

It might be possible that the HTMLLoader is being attached the stage before the document is actually ready, which may explain some of the weirdness.

If you have any more information that would be an awesome help...

Input elemnts in HTMLLoader are readonly in adobe AIR

2 Answers2