HTML5 target input TextField

Help
#1

Are input text fields supported on HTML5 canvas or DOM target?

#2

They might not be supported at the moment, although supporting them in DOM mode should probably not be very hard – just a matter of making sure it can selectable, and editable, as well as synchronizing the DOM contents with the “text” value reported in code

#3

adding a line 35 to openfl._internal.renderer.dom.DomTextField.hx

if (textField.type == TextFieldType.INPUT) {
textField.__div.contentEditable=“true”;
}

Makes the div editable. I dont know how to ad an event listener to it though

#4

It looks like recent browsers support an “input” event, which should dispatch from the object if it is content-editable.

This is not fully supported in Internet Explorer, it may require a combination of events, like “blur keyup paste copy cut mouseup”, so on.

I would start first with adding a listener for “input” events, and see if we can get that all working properly. Then we could add the conditional case for trying to also handle browsers that do not dispatch the event

#5

In my case it seams like KeyboardEvent .KEY_DOWN is doing the job.
And to get the value of the input I edited the get_text() method of TextField class to this:

@:noCompletion public function get_text ():String {
        if (__div != null) 
        {
    		return __div.textContent;
    	}
    	return __text;
 }
#6

We might need multiple events, remember someone may copy/paste with the keyboard, or with the mouse :slight_smile:

#7

Textfield events are firing but are associated with stage and never make it to event listener. I dont know how to fix.

Also the space bar is being captured in the handleEvent of the LIME KeyEventManager so spaces cant be added to an editable DIV.

I will look into making pull requests but…

#8

You can openfl-bitfive instead, it implemented input textfield. See my test: http://app.flaswf.tk/TextTyper/v0.2/

1 Like
#9

Perhaps it could be ported

#10

Any progress on this?

Input Text is quite important and the misalignment of the carat and selection at the moment is quite miserable.

#11

There’s an initial implementation of canvas input text that’s available now (in Github), I believe that -Ddom mode might also already have input text, I forget

#12

Do you have any more details? I’ve tried a bunch of configurations and can’t get input text working properly. It stops letting me select it after the first time. Even when I can select it it is completely opaque and not the correct height/width.

It seems like input is not working with -Ddom in the latest stable build. I can’t get the dev build to work anymore because IModule is missing in lime.

#13

That’s really great! but it breaks a lot of other things, like right align text, and TextField.textWidth.

How has it worked out for you long term?

#14

Any news about input TextField, it’s still not working for me.

1 Like