This post was originally published at Tutorial: Moving Native TextField/TextBox Objects

One challenge for Corona developers is how to deal with native.newTextField() and native.newTextBox() objects, in particular when they are located in the lower half of the screen where they can be covered by the device’s keyboard. A common solution is to explicitly move native text field/box objects upward by some variable “keyboard height” when the keyboard becomes active, thus keeping them within view/access of the user.

Using Display Groups

For simplicity, native objects can be moved as one “unit,” specifically as part of a display.newGroup() which may contain supporting objects like a background, images, buttons, etc. Consider this code:

This code creates a simple UI (User Interface) consisting of two text fields named value1 and value2, plus (+) and equal (=) text objects, a title text label, and a label to hold the results of summing the two fields. All of these objects are inserted within the UIGroup display group, including the native text fields. Thus, when we position the group — or transition it upwards or downwards — everything moves in unison.

Of course, this doesn’t mean that you can position native objects in front of normal display objects — native objects will always appear in front of other display objects, but we can still handle the movement and positioning of these objects as one collective group.

Note that when handling the text field inputs, we confirm that a value has been entered into both fields before transitioning the group back down. We also confirm that each value is a number to avoid any potential errors in summing them together. With these two checks in place, the fields will remain accessible above the keyboard while the user interacts with them, and then when both have valid entries, the group can transition back down while the keyboard is simultaneously dismissed/hidden. Of course, depending on your own design, this approach may vary, but you should ensure that the input fields remain accessible for the duration of the required interactivity.

Conclusion

As demonstrated, this method is useful for handling native input objects. It can benefit developers of business/utility apps in particular, since apps in these categories often rely on keyboard-based interaction.

Source:

This post was originally published at Tutorial: Moving Native TextField/TextBox Objects