Defold TextInput

The Defoldmine
1

Hi everyone,
If you are not very statisfied with built-in Defold text input method, this extension can help you as it uses a real native text field to handle the text you input, so you can type whatever text you want in your language, no mater marked text, no delay or missing characters issue as well.

There are 2 types of text input field, normal and hidden. The hidden field is surely what you are expecting, I think.

Check it out: Defold TextInput (github.com)

Demo: defold-textinput (baochungit.github.io)

Hope it helps! Cheers!

13 Likes
2

Great work, thank you.

1 Like
3

It now supports for HTML5 (web platform). However on mobile, some browsers require users to interact with the input element to be able to show the keyboard. In this case, using a normal text input might be the best option.

3 Likes
4

Hi guys, it’s now able to show virtual keyboard for hidden inputs on mobile browsers but it still requires a touch (interaction) onto the input delegation.

1 Like
5

I had some issues with supporting Android predictive keyboards (handling text/marked-text is a bit tedious, handling a non-basic cursor at the end of input seems almost impossible, on some keyboards predictive/swipe typing produces duplicate output etc). I used this extension (v1.1.3) and it worked for my use case, with two issues:

a. On iOS, even though I set my input field as KEYBOARD_TYPE_EMAIL, I get password suggestions from the OS, as if it’s defined as a password field. I do see what I type though, so it’s not a password field.

b. On Android, for which I mainly used the extension, I had success in most devices. There are some devices though where, for some reason. the text input is placed below the area I want it to be rendered in. When this happens, all my gui.pick_node hit areas also seem to be offset by the same distance (around 32px towards the bottom). It’s as if the placement on the native input box messes up the UI coordinates. The devices where this happens (I’ve seen in on two) are very tall and narrow (1080x2416 or so). I also use the safe area extension, so I don’t know if there’s any conflict, just mentioning.

Disabling the extension and returning to my standard Defold input fixes this behavior.

In general Defold has been smooth sailing, except for mobile keyboard handling :slight_smile:

Here is how I set my input element up:

ti_email_id = textinput.create(false, make_email_listener(self))
		textinput.set_keyboard_type(ti_email_id, textinput.KEYBOARD_TYPE_EMAIL)
		textinput.set_auto_capitalize(ti_email_id, textinput.CAPITALIZE_NONE)
		textinput.set_return_key_type(ti_email_id, textinput.RETURN_KEY_TYPE_NEXT)
		textinput.set_max_length(ti_email_id, 64)
		textinput.set_text_color(ti_email_id, "#ffffff")
		textinput.set_visible(ti_email_id, false)

And this is how I place it in the gut node I want it rendered in:

local function calc_position_and_size(node)
	local _, window_height = window.get_size()
	local window_scale = get_window_scale()
	local pos = gui.get_screen_position(node)
	local size = gui.get_size(node)
	local scale = get_screen_scale()
	local width, height = size.x * scale, size.y * scale
	return {
		position = {
			x = (pos.x - width / 2) * window_scale,
			y = (window_height - pos.y - height / 2) * window_scale,
		},
		size = { width = width * window_scale, height = height * window_scale },
	}
end
1 Like