HTML5 TextField - Broken Multiline Input

#1

flIt looks like multiline TextFields in HTML5 (canvas target) dont react to carriage returns. I’ve got a workaound which uses some mouse and keyboard event listeners. Could probably build this more cleanly if we put it into the community OpenFL build.

1 Like
#2

The current work around created for this issue is not ideal, but it works, at least in HTML 5.

Adding keypress listeners for the enter press and then taking the text and inserting a “\n” character to where the caret is set. You’d have to break up the entire text into an array to append the character to the correct position.

#3

Yup, here is a custom implementation. Is there anyway we can move this into the OpenFL main ?

function onKeyPress(e:KeyboardEvent):Void 
{
	if (isFocused)
	{
		breakLongWords();
		if (e.keyCode == Keyboard.ENTER || e.keyCode == Keyboard.NUMPAD_ENTER)
		{
			// trace(notepad.caretIndex);
			addLineBreakAt(notepad.caretIndex);
		}
	}
}

function addLineBreakAt(caretIndex:Int):Void
{
	var separatedCharacters:Array<String> = notepad.text.split("");
	if (separatedCharacters[caretIndex - 1] != null)
	{
		separatedCharacters[caretIndex - 1] += "\n";
		notepad.text = separatedCharacters.join("");
		notepad.setSelection(caretIndex + 1, caretIndex + 1);
	}
	else
	{
		notepad.appendText("\n");
		setCursorToEnd();
	}		
}
#4

Does this feature work on desktop without using legacy? If so, perhaps we just need to update the Lime HTML backend to dispatch the proper text input events when using a return

#5

Not sure what you mean by desktop legacy. Would that be the same as a windows or mac build ?

#6

If you run openfl test windows on a regular (non-Flixel) project, this is the current. It’s the same TextField as on HTML5, but the text input runs through native SDL rather than the browser. I wondered if it might be specific to how text input characters are handled – if so, we may need to improve the Lime backend a little so HTML5 text input is consistent with native text input :slightly_smiling:

openfl test windows -Dlegacy (which is default in Flixel) uses a totally different implementation for text, so that would be apples to oranges :slight_smile: