Textfield multiline, wordwrap and maxChars for DOM target seems broken

#1

Hi,
afraid that multiline, wordwrap and maxChars seems to be broken for the DOM target. Below is a screenshot, and below that is some sample code.
I’d really appreciate some help on this :slight_smile:
With best wishes,
Andy.

public function new() 
	{
		super();
		
		var tf = new TextField();
		tf.text = duplicate('multiline = false, wordWrap = true, INPUT', 10);
		tf.type = TextFieldType.INPUT;
		tf.background = true;
		tf.backgroundColor = 0xffff00;
		tf.maxChars = 10;
		tf.multiline = false;
		tf.wordWrap = false;
		tf.width = 200;
		tf.height = 50;
		this.addChild(tf);
		tf.y = 100;
		tf.x = 200;
	}
	
	
	function duplicate(str:String, i:Int) {
		var arr:Array<String> = [];
		while (--i > 0) {
			arr.push(str);
		}
		return arr.join(", ");
	}
#2

When I tried your exact code, it seems the multiline and wordWrap properties work fine in HTML5, but maxChars does not work. The multiline field only determines if newlines are allowed in the text. What version of OpenFL are you using?

Here was my result:

And here is the code.

#3

Hi,

I’m using:

I’ve created a repo of my code here https://github.com/andytwoods/TextFieldIssues

Fingers crossed I am doing something silly.

Thanks for your help,
Andy.

How can i access __div
#4

Ah I see now. It may be that the DOM renderer for text fields is incomplete. I took a peek at OpenFL’s internal organs and didn’t see any indication that word wrap or multilining were accounted for. I could be wrong, though, as I’m no expert on the status of OpenFL’s progress.

#5

Well, it may be a hack and needs thorough testing, but does this do what you want?

In your DOMTextField.hx, here at line 100 add:

if (!textEngine.multiline) {
  textField.__style.setProperty ("white-space", "nowrap", null);
}
textField.__style.setProperty ("overflow", "hidden", null);

I’ve never understood why the overflow is not set to hidden – TextFields seem to behave that way in Flash, I think. Anyway, you could put the hidden inside the if block if you like.

This gives me an editable, single line of text masked to just the width/height of the div:

Looks the same in Flash, too.

Best,
-Jeff

#6

Oh, that doesn’t address maxChars. Need to poke around a bit there.

FYI, the Flash behavior (if initial length>maxChars) is to display the full initial value, then disable further keyboard input until the length is <10.