prevent native.newTextField from keyboard showing up when tapping on it

Solar2D General Questions/Discussion
#1

Dear Corona community,

What I’d like to do : I’d like to give my users the option to change their username, which basically requires a native.newTextField somewhere. In addition, I don’t want to show cursor and keyboard when users click on their username, but only when they press a button “change username”.

What I’ve done so far: I’ve created not only a newTextField, but also a display.newText() object at the exact same position. Both the textField and newText hold the same username as text. In the beginning, the newTextField is not visible (isVisible = false and alpha = 0), while the newText object is visible. This ensures that users see their username, but taps on it dont do anything. When users press the “change username” button, the newText disappears, the inputfield appears, keyboard shows up and sets the cursor to the end of the username. So, basically this does the job.

Problem with this solution: The y-position of the text in the newTextField is a bit below the text of the newText. So, when the switch happens, the text is not at the same y-position, but maybe 2px below. I handled that by making the text of the inputField a bit bigger and using transitions to fade out the newText and fade in the inputField. But here it comes: The moment I set

newTextField.isVisible = true

transition.to(newTextVield, {alpha = 1, time=300})

the newTextField becomes fully visible for a couple of milliseconds, before transition from alpha = 0 to alpha =1 starts. So, even though alpha = 0 and isVisible = false is set in :create-phase, setting isVisible to true before transitiononig alpha to 1 makes it appear fully visible for a second.

What I’d expect: I would have thought that setting an object to alpha = 0 and isVisible to false allows setting isVisible to true without instantly showing the object. I have to work with isVisible = false to prevent the keyboard showing up when tapping the TextField though.

Hope it gets clear where my problem is. Maybe there is an even simpler solution like “newTextField.isTappable” or something :slight_smile:

Thanks

#2

Hi,

Native objects behave native on top of corona and what you experience is just that.

You could set the native textfield outside screen while you activate it, before moving it on-screen.

Native textfields will behave differently depending on platform. I assume you are on apple since you manage to fade it, something that doesnt work in windows. Also not quite sure about how it behaves on Android.

My preferred solution is to keep native textfields off screen permanently while mirroring it to a normat text object, which allows me the freedom of making it look how I want. The mirror object catches all touches and as such you can easily set and remove focus on the native textfield. The only downside to this it is tricky if you want the user to be able to see and move the input cursor.

#3

Thank you anaqim for your explanations which make totally sense. I’ll do exactly that and position the native field outside viewable area, that should do the trick.

Great, this topic can be considered solved :slight_smile:

#4

I’ve a lot of newTextField in my apps since i only do business apps. usually, i create a dialog box to edit info i need. it’s cleaner and you can reuse easy that code.

you can have as a list your info, and on press that item show a dialog box to edit info.

it the images i show i don’t have your example but you can have the pop-up box as in edit.jpg file.

#5

thanks carloscosta, guess by the end of the day it’s a design-based decision. In my case, your solution would not really match the overall layout, so I’ll go for what anaqim mentioned.

Anyway, thanks for posting a good alternative :slight_smile:

#6

Hi,

Native objects behave native on top of corona and what you experience is just that.

You could set the native textfield outside screen while you activate it, before moving it on-screen.

Native textfields will behave differently depending on platform. I assume you are on apple since you manage to fade it, something that doesnt work in windows. Also not quite sure about how it behaves on Android.

My preferred solution is to keep native textfields off screen permanently while mirroring it to a normat text object, which allows me the freedom of making it look how I want. The mirror object catches all touches and as such you can easily set and remove focus on the native textfield. The only downside to this it is tricky if you want the user to be able to see and move the input cursor.

#7

Thank you anaqim for your explanations which make totally sense. I’ll do exactly that and position the native field outside viewable area, that should do the trick.

Great, this topic can be considered solved :slight_smile:

#8

I’ve a lot of newTextField in my apps since i only do business apps. usually, i create a dialog box to edit info i need. it’s cleaner and you can reuse easy that code.

you can have as a list your info, and on press that item show a dialog box to edit info.

it the images i show i don’t have your example but you can have the pop-up box as in edit.jpg file.

#9

thanks carloscosta, guess by the end of the day it’s a design-based decision. In my case, your solution would not really match the overall layout, so I’ll go for what anaqim mentioned.

Anyway, thanks for posting a good alternative :slight_smile: