Tab between input fields

I have a simple login form with email and password input fields next to each other.
Now I set up 2 input axes called UI Horizontal and UI Vertical and set them as navigation axes in the Event System. The UI Vertical includes Down Arrow as well as Tab key.

While the UI navigation seems to work with buttons it doesn't seem to work with input fields.
When I press Up, Down or Tab on a single-line input field it doesn't switch the focus.

How could I achieve the expected behavior?
Is this a bug with input fields?

 

I use this temporary workaround (add on one object, will work for all GUI elements in the scene):

Code (csharp):

1.  
2. using UnityEngine.UI;
3. using UnityEngine.EventSystems;
4.  

Code (csharp):

1.  
2. public void Update()
3. {
4.  
5. if (Input.GetKeyDown(KeyCode.Tab))
6. {
7.     Selectable next = system.currentSelectedObject.GetComponent<Selectable>().FindSelectableOnDown();
8.  
9.     if (next!= null) {
10.                        
11.         InputField inputfield = next.GetComponent<InputField>();
12.         if (inputfield !=null) inputfield.OnPointerClick(new PointerEventData(system));  //if it's an input field, also set the text caret
13.                        
14.         system.SetSelectedGameObject(next.gameObject, new BaseEventData(system));
15.     }
16.     //else Debug.Log("next nagivation element not found");
17.    
18. }
19. }
20.  

*updated for it to work with all navigation types*

 

This didn't work alone, needed to add:

Code (csharp):

1.  
2. EventSystem system;
3.  
4.     void Start ()
5.     {
6.         system = EventSystemManager.currentSystem;
7.          
8.     }
9.  

 

Did this feature ever get added?

 

From what I can tell inputfields are buggy as hell an I can't get a hold of a developer to address the issue.

 

Bug reports for bugs speak louder the forum posts.

No it has not yet.

 

Here's what I've observed...

If you have clicked on an InputField, it will not only have the control focus, but will be in edit mode. If you press the enter key on your keyboard, that will take that InputField out of edit mode. When not in edit mode, the standard control navigation system (arrow keys) works. So I would not actually consider this a bug. Meaning, it appears to be working as designed.

Having said that, we do need a way to cycle between InputField controls using the tab key. I added a feature request in the feedback section as the built-in bug reporter specifically says if it's a new feature request, use the feedback system instead of the bug reporter. Will that suffice, or should I be calling this a bug?

http://feedback.unity3d.com/suggest...tab-key-based-navigation-between-input-fields

 

I believe this is already added to feedback http://feedback.unity3d.com/suggestions/ugui-input-field-navigation. That's from last July, so unfortunately there is no rush to implement it.

 

Glad this thread was around. I don't understand why this wasn't built-in; moreso, I don't understand why it hasn't been implemented yet.

The snippet above worked wonderfully. Many thanks to posting this.

 

Worked perfectly for me. Just had to change some code to some updated functions and variables:

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using UnityEngine.UI;
4. using UnityEngine.EventSystems;
5.  
6. public class InputNavigator : MonoBehaviour
7. {
8.     EventSystem system;
9.  
10.     void Start()
11.     {
12.         system = EventSystem.current;// EventSystemManager.currentSystem;
13.      
14.     }
15.     // Update is called once per frame
16.     void Update()
17.     {
18.         if (Input.GetKeyDown(KeyCode.Tab))
19.         {
20.             Selectable next = system.currentSelectedGameObject.GetComponent<Selectable>().FindSelectableOnDown();
21.          
22.             if (next != null)
23.             {
24.              
25.                 InputField inputfield = next.GetComponent<InputField>();
26.                 if (inputfield != null)
27.                     inputfield.OnPointerClick(new PointerEventData(system));  //if it's an input field, also set the text caret
28.              
29.                 system.SetSelectedGameObject(next.gameObject, new BaseEventData(system));
30.             }
31.             //else Debug.Log("next nagivation element not found");
32.          
33.         }
34.     }
35. }

 

I used this and it worked great for ONE set of input fields (I enable and disable them according to the state of the game). When I added this to another script for another set of input fields, it broke for both. Anyone have a clue what I can do to have this in more than one script and have it still work? Only one of the scripts will be enabled at a time.

 

Disable the interactable setting on each input field you're not using (a pain) or use a canvas group to disable them entirely when not in use. Just use one tab manager script. Set each input's navigation as you desire. Use the graphical view for better reference, so you can keep closed groups of navigation sets.

Just use one tab manager script. It works great.

 

Works great! This should be default on the input navigation options because its such a common thing to need.

 

Hi,

if you also want to make the tab cycle between elements and go back by pressing shift, replace:

Code (CSharp):

1.             Selectable next = system.currentSelectedGameObject.GetComponent<Selectable>().FindSelectableOnDown();

by

Code (CSharp):

1.       Selectable next = null;
2.        if (Input.GetKey(KeyCode.LeftShift) || Input.GetKey(KeyCode.RightShift))
3.        {
4.         next = system.currentSelectedGameObject.GetComponent<Selectable>().FindSelectableOnUp();
5.          if (next==null)
6.            next = system.lastSelectedGameObject.GetComponent<Selectable>();
7.        }
8.        else
9.        {
10.          next = system.currentSelectedGameObject.GetComponent<Selectable>().FindSelectableOnDown();
11.          if (next==null)
12.            next = system.firstSelectedGameObject.GetComponent<Selectable>();
13.        }

 

I'm actually getting a strange behavior when using it with the Bolt networking debug console overlay on of it. As i toggle through the input controls the debug console disappears then appears.

 

Yeah, Bolt console display default button is tab. Go into the Bolt Settings window, change the default button to something that isn't tab.

 

I am trying with Android mobile and lot's of issues happen with input text field
1. On switching between two text input field, text will disappear.
2. on typing text iin another input field , text getting typed will appear in all the input fields

 

I think those particular input field bugs with text from one input field showing up in another have recently been fixed in a patch. 4.6.6p3 maybe? Not sure about the Unity 5 though.

 

Still seeing this in 5.0.0f4

The text that disappears I believe is placeholder text. At first I thought it was something to do with the fullscreen mode contracting to fit the software buttons, and causing the text to truncate, but I've set it to best fit and it still happens so I'm not sure.

The copied text issue is intermittent and I haven't been able to reliably reproduce but seems to be actually putting the text into all fields, bypassing validation. Which is a real problem if that's true. *Edit* I don't think it actually bypassing validation. Just a display issue.

 

Ditto, such a basic feature still not implemented in 5.1.2f1

 

In addition to them, if you want to navigate back to the start of the objects (rather than moving up) here is my code for that:

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using UnityEngine.UI;
4. using UnityEngine.EventSystems;
5.  
6. public class InputNavigator : MonoBehaviour
7. {
8.     EventSystem system;
9.  
10.     void Start()
11.     {
12.         system = EventSystem.current;
13.    
14.     }
15.  
16.     void Update()
17.     {
18.         if (Input.GetKeyDown(KeyCode.Tab))
19.         {
20.             Selectable next = system.currentSelectedGameObject.GetComponent<Selectable>().FindSelectableOnDown();
21.        
22.             if (next != null)
23.             {
24.                 InputField inputfield = next.GetComponent<InputField>();
25.                 if (inputfield != null)
26.                     inputfield.OnPointerClick(new PointerEventData(system));
27.            
28.                 system.SetSelectedGameObject(next.gameObject, new BaseEventData(system));
29.             }
30.          
31.             //Here is the navigating back part:
32.             else
33.             {
34.                 next = Selectable.allSelectables[0];
35.                 system.SetSelectedGameObject(next.gameObject, new BaseEventData(system));
36.             }
37.            
38.         }
39.     }
40. }

 

Here's a version of it that also navigates backwards with Shift+Tab:

Code (csharp):

1.  
2. using UnityEngine;
3. using System.Collections;
4. using UnityEngine.UI;
5. using UnityEngine.EventSystems;
6.  
7. public class UITabNavigator : MonoBehaviour
8. {
9.  private EventSystem system;
10.  
11.  private void Start()
12.  {
13.  system = EventSystem.current;
14.  
15.  }
16.  
17.  private void Update()
18.  {
19.  if (Input.GetKeyDown(KeyCode.Tab))
20.  {
21.  Selectable next = Input.GetKey(KeyCode.LeftShift) || Input.GetKey(KeyCode.RightShift) ?
22.  system.currentSelectedGameObject.GetComponent<Selectable>().FindSelectableOnUp() :
23.  system.currentSelectedGameObject.GetComponent<Selectable>().FindSelectableOnDown();
24.  
25.  if (next != null)
26.  {
27.  InputField inputfield = next.GetComponent<InputField>();
28.  if (inputfield != null)
29.  inputfield.OnPointerClick(new PointerEventData(system));
30.  
31.  system.SetSelectedGameObject(next.gameObject);
32.  }
33.  
34.  //Here is the navigating back part:
35.  else
36.  {
37.  next = Selectable.allSelectables[0];
38.  system.SetSelectedGameObject(next.gameObject);
39.  }
40.  
41.  }
42.  }
43. }
44.  

Mind that because it uses FindSelectableOnUp/Down, navigating backwards may not happen in the exact same order as it went forward. Mind your navigation flow.

Also, I had a compile error with orumcam's version above... It complained about the SetSelected methods. Did those methods change signature maybe? This version here compiles under Unity 5.1.2

Cheers

 

All above code to navigate between input fields, does work in unity editor but doesn't work in actual ios device.

It do select the next input field, but opened keyboard disappears.
Again, In order to open the keyboard, I have to click the input field.

so, this code of lines are not proving to be useful while working with mobiles :-(

We are checking it in 5.2 latest unity version

 

people just dont use TAB to navigate between inputfields, they tap

 

Thanks for posting this code folks, I can confirm it works for InputField navigation in WebGL builds (5.2.2).

This is the version I am using, it is the one provided by HarvesteR with some additional null checks:

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.UI;
3. using UnityEngine.EventSystems;
4.  
5. public class UITabNavigator : MonoBehaviour
6. {
7.     private EventSystem system;
8.  
9.     private void Start()
10.     {
11.         system = EventSystem.current;
12.     }
13.  
14.     private void Update()
15.     {
16.         if (Input.GetKeyDown(KeyCode.Tab)
17.             && system.currentSelectedGameObject != null
18.             && system.currentSelectedGameObject.GetComponent<Selectable>() != null)
19.         {
20.             Selectable next = Input.GetKey(KeyCode.LeftShift) || Input.GetKey(KeyCode.RightShift) ?
21.             system.currentSelectedGameObject.GetComponent<Selectable>().FindSelectableOnUp() :
22.             system.currentSelectedGameObject.GetComponent<Selectable>().FindSelectableOnDown();
23.  
24.             if (next != null)
25.             {
26.                 InputField inputfield = next.GetComponent<InputField>();
27.                 if (inputfield != null)
28.                 {
29.                     inputfield.OnPointerClick(new PointerEventData(system));
30.                 }
31.  
32.                 system.SetSelectedGameObject(next.gameObject);
33.             }
34.  
35.             //Here is the navigating back part:
36.             else
37.             {
38.                 next = Selectable.allSelectables[0];
39.                 system.SetSelectedGameObject(next.gameObject);
40.             }
41.  
42.         }
43.     }
44. }
45.  

 

Here's a slightly modified one, just to avoid doing GetComponent calls on Update. This will only attempt to find the attached components when Tab is down.

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.UI;
3. using UnityEngine.EventSystems;
4.  
5. public class UITabNavigator : MonoBehaviour
6. {
7.     private EventSystem system;
8.  
9.     private void Start()
10.     {
11.         system = EventSystem.current;
12.     }
13.  
14.     private void Update()
15.     {
16.         if (Input.GetKeyDown(KeyCode.Tab))
17.         {
18.             if (system.currentSelectedGameObject != null
19.                 && system.currentSelectedGameObject.GetComponent<Selectable>() != null)
20.             {
21.                 Selectable next = Input.GetKey(KeyCode.LeftShift) || Input.GetKey(KeyCode.RightShift) ?
22.                     system.currentSelectedGameObject.GetComponent<Selectable>().FindSelectableOnUp() :
23.                 system.currentSelectedGameObject.GetComponent<Selectable>().FindSelectableOnDown();
24.  
25.                 if (next != null)
26.                 {
27.                     InputField inputfield = next.GetComponent<InputField>();
28.                     if (inputfield != null)
29.                     {
30.                         inputfield.OnPointerClick(new PointerEventData(system));
31.                     }
32.  
33.                     system.SetSelectedGameObject(next.gameObject);
34.                 }
35.  
36.                 //Here is the navigating back part:
37.                 else
38.                 {
39.                     next = Selectable.allSelectables[0];
40.                     system.SetSelectedGameObject(next.gameObject);
41.                 }
42.  
43.             }
44.         }
45.     }
46. }
47.  

Cheers

 

You are right. But, I need it in below scenario,

1. I had a game where there is almost a full page puzzle, where kids have to identify the statement and fill letters in the boxes.
2. So, user will tap once in one character box and it should continue to next automatically, without user needing to do the tap.
3. Now, here I use that navigating code for input boxes.
4. This was working in unity 4.6.1 even for mobiles. But this is no more working with latest versions of unity.
5. Now client wants to upgrade to a newer version to utilize the lighting effect and more efficient texture shaders.
6. But I am badly stuck here. Hence needed a solution. :-(

 

Magic thx!

 

For anybody still reading this, all code versions above have logical flaws. They only take into consideratin top-to-bottom tab order for a few things. Here is a fixed version:

Code (CSharp):

1.  
2. using UnityEngine;
3. using UnityEngine.UI;
4. using UnityEngine.EventSystems;
5.  
6. // Tab Navigator for UI
7. // Single instance of this script per GUI
8. // An alternative would be to use a next/previous setting on a single GUI item, which would mean one script per InputField - not ideal
9.  
10. public class tabBehaviour : MonoBehaviour
11. {
12.     private EventSystem system;
13.    
14.     private void Start()
15.     {
16.         system = EventSystem.current;
17.     }
18.    
19.     private void Update()
20.     {
21.         if (system.currentSelectedGameObject == null || !Input.GetKeyDown (KeyCode.Tab))
22.             return;
23.  
24.         Selectable current = system.currentSelectedGameObject.GetComponent<Selectable>();
25.         if (current == null)
26.             return;
27.  
28.         bool up = Input.GetKey (KeyCode.LeftShift) || Input.GetKey (KeyCode.RightShift);
29.         Selectable next = up ? current.FindSelectableOnUp() : current.FindSelectableOnDown();
30.  
31.         // We are at the end or the beginning, go to either, depends on the direction we are tabbing in
32.         // The previous version would take the logical 0 selector, which would be the highest up in your editor hierarchy
33.         // But not certainly the first item on your GUI, or last for that matter
34.         // This code tabs in the correct visual order
35.         if (next == null)
36.         {
37.             next = current;
38.  
39.             Selectable pnext;
40.             if(up) while((pnext = next.FindSelectableOnDown()) != null) next = pnext;
41.             else while((pnext = next.FindSelectableOnUp()) != null) next = pnext;
42.         }
43.  
44.         // Simulate Inputfield MouseClick
45.         InputField inputfield = next.GetComponent<InputField>();
46.         if (inputfield != null) inputfield.OnPointerClick(new PointerEventData(system));
47.  
48.         // Select the next item in the taborder of our direction
49.         system.SetSelectedGameObject(next.gameObject);
50.     }
51. }
52.  

 

@SirRogers Works great, Thank you!

 

Thanks guys, I actually have a more advanced version with added functionality. I haven´t had much time lately though.
I will put it up when I refine it, it can create "TabGroups" so you can separate elements which you want to tab through, this makes great sense if you have two different groups of input-fields on the screen.

 

@SirRogers

Thank you, this script works wonderfully. No messing around with things, setting things up, nothing, just add the script on a game object and it works! I'm sure you have made the lives of lots of people easier by making this available. It is rare I take the time to comment on something, but this was truly deserving of some praise for taking the time to make this and make it available. I know its not terribly complicated, but the fact it "just works" and i didn't have to take the time to write it makes it perfect.

Thank you to the others that took time to make and post scripts as well. This is something that should be in unity by default, and since it wasn't you all were kind enough to help the community out.

 

@SirRogers

I have found one small issue. I have a UI that is laid out a little funky so im sure that is whats causing it.
I have attached a picture below of the issue, and I will attempt to figure out how to remedy this on my own, im simply posting this here so others are aware, and maybe someone has come across this and already fixed it.

The Issue:
I have labeled the order in which hitting tab alternates with green numbers. If you start on the drop down label ignored hitting tab takes you to 1, and hitting shift-tab will take you back. But only if you start on it. (You cant start on back as that would require you to hit it, taking you back).

Once you tab to the button labeled 2, you can no longer shift-tab backwards to button 1, or the drop down labeled ignored. Instead it takes you to the button labeled as 5. Hitting Shift-tab to try to go backwards to button 2, takes you instead to drop-down labeled 4.

If you tab again from button 2 to button 3 (instead of S*** tabbing down which takes you to 5), you go from 2 -> 3 like normal, however S***-tab now takes you down to the button labeled 5. Hitting tab on button 3 takes you to dropdown 4.

Hitting tab, or shift tab on dropdown 4 functions as expected taking you either to button 3 or 5.

Hitting tab on button 5 takes you to button 3, shift tab on button 5 takes you to drop down 4.

Once you are on button 3, dropdown 4, or button 5, tab and shift tab is stuck cycling between them only.




Everywhere else tab order functions as expected, except this screen.

 

RuinsOfFeyrin:

Hi there, I didn't read the post word by word (not sure if I got all the steps).

Are you aware of the fact that you can specify explicitly, what the "next" button is in any of the navigation directions?

You can do this by going to button component in Inspector / Navigation section, and setting the navigation options?

 

@eses

Yes i was aware you can set the order there, but i was unaware that it would affect this script. Thank you for that bit of information.

 

If you guys are trying to cycle between multiple types, consider using this:

Code (CSharp):

1. var pointer = next.GetComponent<IPointerClickHandler>();
2. pointer.OnPointerClick(new PointerEventData(system));

instead of:

Code (CSharp):

1. InputField inputfield = next.GetComponent<InputField>();
2. if (inputfield != null) inputfield.OnPointerClick(new PointerEventData(system));

This seems to be working so far but haven't fully tested it.

 

SirRogers, that is a fantastic script! Simple to use and works perfect! Thank you very much

 

Have anyone managed to navigate using KeyCode.UpArrow and KeyCode.DownArrow or Vertical Axis?

When I do this:

Code (CSharp):

1.             if (inputTextName.isFocused)
2.             {
3.                 if (Input.GetKeyDown(KeyCode.UpArrow))
4.                 {
5.                     EventSystem.current.SetSelectedGameObject(inputTextName.FindSelectableOnUp().gameObject);
6.                 }
7.  
8.                 if (Input.GetKeyDown(KeyCode.DownArrow))
9.                 {
10.                     EventSystem.current.SetSelectedGameObject(inputTextName.FindSelectableOnDown().gameObject);
11.                 }
12.             }

It works nicelly as the EventSystem moves to the next/previous navigation gameobject but when it focus, triggers the default up/down navigation. In short, it always move two fields up or down.

 

Add this to each input field, this'll filter out the tab so you keep what's autoselected.

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using UnityEngine.UI;
4.  
5. public class IgnoreTab : MonoBehaviour {
6.     InputField mainInputField;
7.  
8.     void Start()
9.     {
10.         mainInputField = GetComponent<InputField> ();
11.         mainInputField.onValidateInput += delegate(string input, int charIndex, char addedChar) { return MyValidate(input, charIndex, addedChar ); };
12.     }
13.  
14.     char MyValidate(string input, int charIndex, char charToValidate)
15.     {
16.         if (charToValidate == '    ')
17.             return '\0';
18.         return charToValidate;
19.     }
20. }
21.  

 

Hi,
so I am having an issue in the WebGL build on Unity 5.3.5f1:
What I want to achieve is simple being able to tab between different text fields by clicking Tab.
In editor it works, but in the web build Input with KeyCode.Tab doesn't seem to work at all..

tabBehaviour from previous post also is not helping, what am I missing ? Is tab input somehow disabled by web browsers ? (I've been testing on Firefox, Chrome, and Edge, and result is the same everywhere)..

 

Hi Steffan,

The following definitely works. It required some slight modification in comparison to previous code listed though is in the main correct.

I've just saved it as a separate script and attached it to the Canvas object.

This also factors in the use of Shift-Tab to go backwards if someone wants to go backwards as well.

Hope this helps.

Regards,


Christian

P.S.: Not sure why this was reported in forums and still doesn't work with people needing to code it manually. As mentioned previously it's pretty stock-standard type stuff for operability.

Code (CSharp):

1. EventSystem system;
2.  
3.     // Use this for initialization
4.     void Start ()
5.     {
6.  
7.         system = EventSystem.current;
8.  
9.     }
10.  
11.     // Update is called once per frame
12.     public void Update()
13.     {
14.  
15.         if (Input.GetKeyDown(KeyCode.Tab))
16.         {
17.             Selectable next = null;
18.             if (Input.GetKey(KeyCode.LeftShift) || Input.GetKey(KeyCode.RightShift))
19.             {
20.                 next = system.currentSelectedGameObject.GetComponent<Selectable>().FindSelectableOnUp();
21.                 if (next == null)
22.                     next = system.lastSelectedGameObject.GetComponent<Selectable>();
23.             }
24.             else
25.             {
26.                 next = system.currentSelectedGameObject.GetComponent<Selectable>().FindSelectableOnDown();
27.                 if (next == null)
28.                     next = system.firstSelectedGameObject.GetComponent<Selectable>();
29.             }
30.  
31.             if (next != null)
32.             {
33.  
34.                 InputField inputfield = next.GetComponent<InputField>();
35.                 if (inputfield != null) inputfield.OnPointerClick(new PointerEventData(system));  //if it's an input field, also set the text caret
36.  
37.                 system.SetSelectedGameObject(next.gameObject, new BaseEventData(system));
38.             }
39.             //else Debug.Log("next nagivation element not found");
40.  
41.         }
42.     }

 

Thank you to all who have worked on this.

 

Thank you all, especially SirRogers, i was doing one by myself, although it wouldn't be as nice as yours, so thank you sir! and thank you all, this help the community alot.

 

Code (CSharp):

1.  
2.         if (next != null)
3.         {
4.             var selectableObject = system.currentSelectedGameObject.GetComponent<Selectable>();
5.             if (selectableObject != null)
6.                 selectableObject.OnPointerExit(new PointerEventData(system));
7.             selectableObject = next.GetComponent<Selectable>();
8.             if (selectableObject!=null)
9.                 selectableObject.OnPointerEnter(new PointerEventData(system));
10.             system.SetSelectedGameObject(next.gameObject, new BaseEventData(system));
11.         }
12.  

 

Used SirRoger's solution and it worked great in my case. I have 3 input fields. Tab moves down. Using Shift+Tab navigates backwards. Thanks a lot.

I too think there should be a default way in Unity to achieve this behavior. Some checkbox or something that puts an input field in the cycling. Possibly the user could choose which key would do the cycling, or simply use tab as default which is what people normally use.

 

Feature request: integrate bug report system into forums.

Extended reply: I used the snarkiness for impact but I don't actually have any bitterness here. I'll probably make a bug report to suggest integrating bug reporting feature/support/UI directly into forums.

 

is this ever going to be implemented in unity? its impossibly to make a simple login with username and password

 

This is pretty important in iOS and Android. At least in iOS native apps, you have the choice of what kind of text input field you want. In one of the modes you can set a keyboard that has a "Next" button on the keyboard to jump to the next field instead of having the user tap on each subsequent field. I wish this was updated. Will contact our local Unity rep to see if this can be bumped.

 

Thank you,this is functionally.