NGUI: Tabbing between input fields

One of the most important features of a multiplayer game is the ability for a user to log in, especially if you want to be able to save their progress. Maybe not always, but for the game I’m currently working on it’s pretty important. Everything was going along quite swimmingly. The API endpoints were working perfectly. I’d created a basic login UI which took the data and passed it to the API. Basically, it was functional, and that’s pretty important.

For the current stage of development I was happy with how it looked. But there was one issue that was really bugging me. The user experience with the form was terrible.
To change fields you had to manually click into the next field. With my day job being a web developer, this really frustrated me. I should be able to tab into the next field, and shit+tab into the previous field.

My limited Googling of the issue took me to a NGUI forum post where the only solution was to script the tab functionality. Someone had provided a script, which collected the child inputs then did event dispatching and listening, which is nice and fancy, but didn’t really suit my use case.

So I wrote a simple script that does exactly what I needed.

The code itself is very simple. It first checks to make sure that the input the script is attached to has focus (or isSelected as NGUI calls it). The it checks the input. It also checks to see if the target input is null to avoid errors, because there are times when you may not have a next or previous input to tab to.

The script has two public UIInput variables:

So, all you need to do is drag the next and previous game objects into the nextInput or previousInput fields in the inspector.

Currently, this doesn’t take into account buttons or other field types. But for simple forms this should be more than enough.
You can download the entire script on Github(https://github.com/chrisbegg/nguiinputtabs).

Leave a comment