iOS keyboard return navigate to next field

In iOS, the keyboard has a variety of customizations that can be applied to make it look and perform how you want it to. Most of these can be found in the UITextInputTraits protocol.

Because UITextField implements this protocol, you can easily change the keyboard behavior of text fields!

In this example, I'll show how you can change the text fields to have a "Next" button instead of "Return" and how clicking this (or coincidentally pressing return) will result in navigation to the next field.

For starters, when you create the field, you should specify the returnKeyType on the field:

UITextField *usernameField = [[UITextField alloc] init];  
usernameField.placeholder = @"Username";  
usernameField.autocorrectionType = UITextAutocorrectionTypeNo;  
usernameField.autocapitalizationType = UITextAutocapitalizationTypeNone;  
usernameField.returnKeyType = UIReturnKeyNext;  
usernameField.delegate = self;

UITextField *passwordField = [[UITextField alloc] init];  
passwordField.placeholder = @"Password";  
passwordField.autocorrectionType = UITextAutocorrectionTypeNo;  
passwordField.autocapitalizationType = UITextAutocapitalizationTypeNone;  
passwordField.returnKeyType = UIReturnKeyNext;  
passwordField.delegate = self;

UITextField *password2Field = [[UITextField alloc] init];  
password2Field.placeholder = @"Confirm";  
password2Field.autocorrectionType = UITextAutocorrectionTypeNo;  
password2Field.autocapitalizationType = UITextAutocapitalizationTypeNone;  
password2Field.returnKeyType = UIReturnKeyNext;  
password2Field.delegate = self;  

From above I created three fields and set the returnKeyType to UIReturnKeyNext. This will display the text "Next" instead of "Return". At this point, it looks pretty, but it doesn't do anything.

In order to get the next key to navigate to the next field we need to be able to receive events from the text fields.

We start by making our controller implement the UITextFieldDelegate protocol. Add this protocol to the interface for your controller as so...

@interface CreateAccountTableViewController : TableViewController <UITextFieldDelegate>

Previously, in the creation of each TextField element, we set the delegate to the current controller with usernameField.delegate = self. This allows the TextField to communicate with the controller.

We can now implement the - (BOOL)textFieldShouldReturn:(UITextField *)textField method to customize the event handling for "return key" events. An implementation that navigates between fields would look something like:

- (BOOL)textFieldShouldReturn:(UITextField *)textField
{
    if (textField == self.usernameTextField) {
       [self.passwordTextField becomeFirstResponder];
    }
    else if (textField == self.passwordTextField) {
        [self.password2TextField becomeFirstResponder];
    }
    else if (textField == self.password2TextField) {
        [self.firstNameTextField becomeFirstResponder];
    }
    else if (textField == self.firstNameTextField) {
        [self.lastNameTextField becomeFirstResponder];
    }
    else if (textField == self.lastNameTextField) {
        [self.lastNameTextField resignFirstResponder];

        NSIndexPath *path = [NSIndexPath indexPathForRow:2 inSection:1];
        [self.tableView selectRowAtIndexPath:path animated:true scrollPosition:UITableViewScrollPositionBottom];
        [self displayGenderPicker];
    }
    return true;
}

For each field, we can specify what code we want toe execute. In the example above, the first several fields will navigate to the next field by calling becomeFirstResponder. The field field will close the keyboard with resignFirstResponder and then execute custom code to display a picker.

Depending on how you customize your keyboard, and how you code the textFieldShouldReturn event, you can have complete control over the functionality of the keyboard's return method.

comments powered by Disqus