How to show and hide keyboard on iPhone

When a user touches an input view (for example, a text field), the iOS automatically displays the keyboard on the screen in order to enable the user to enter some data.

Technically, the input view becomes the first responder, which means that every symbol that the user types in will appear in that input view. If the user touches some other input view, then that input view will become the first responder and so on.
But, what will happen once the user has finished typing and wants the keyboard to disappear? The average iOS user will expect that the keyboard hides when he taps somewhere outside the keyboard part of the screen or at least when he taps the return key. However, the keyboard won’t disappear automatically and the user will become very unhappy and delete the app because of its poor UX . Unfortunately, there’s nothing like a checkbox in the Interface Builder, which can help us to make our user happier. This is something we need to care of in our code. So, let’s learn how to do it.

First of all, we can hide the keyboard using the most simple way: by touching the return key on the keyboard. Let’s suppose that you have a view controller class which contains a text field (an UITextField object). Your view controller class needs to conform to the UITextFieldDelegate protocol and it also needs to be the delegate of the text field. Now you need to implement the textFieldShouldReturn:(UITextField *)textField method from the UITextFieldDelegate protocol as follows.

-(BOOL)textFieldShouldReturn:(UITextField *)textField
{
    [textField resignFirstResponder];
    return YES;
}

After you have finished the implementation, build the app and type something in the text field. Tap the return key and you will see how the keyboard hides. At this point, the app has slightly better UX and the user won’t delete it, but it doesn’t mean that he still doesn’t expect more. Today is our lucky day, because we can solve the problem in few lines.

The first step is to add the tap gesture recognizer  to the view controller. Before you can use it, you need to add an UITapGestureRecognizer property in the interface of the view controller class:

 @property (strong, nonatomic) UITapGestureRecognizer *tap;

Now add the following code in the viewDidLoad method body:

 _tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(hideKeyboard)];
_tap.enabled = NO;
[self.view addGestureRecognizer:_tap];

As you can see, this code allocates and initializes the tap gesture recognizer and then adds it to the view. You can also see that the recognizer is disabled. That’s because it intercepts all the taps we make on the screen, including even those taps we make on the text field, which means that the text field won’t become the first responder and the keyboard won’t appear if it’s enabled. Instead of this, the tap recognizer will execute its selector method we assigned to it during the initialization.

What can we do to solve this problem? Yes, you’re right, we need to enable the tap recognizer when the keyboard appears and disable it when the keyboard hides. To make this we need to implement one other UITextField delegate method:

 -(BOOL)textFieldShouldBeginEditing:(UITextField *)textField
{
    _tap.enabled = YES;
    return YES;
}

The previous method is called when the user touches the text field and the keyboard appears. Finally, we need to implement the method which is called when the user taps the screen.

 -(void)hideKeyboard
{
    [_textField resignFirstResponder];
    _tap.enabled = NO;
}

The object _textField is the IBOutlet property for the textfield we use for the input. In the first line the text field resigns the first responder, what causes the keyboard to hide, and in the second line the tap gesture recognizer is disabled again. It will be enabled once the keyboard appears again. If you have more than one text field on your screen, then you will need to send the resignFirstResponder message to all of them as we don’t know which one is the real first responder.

Now run your app and, if you have done everything correctly, you will see how the keyboard appears when you touch the text field and disappears when you touch the screen. Simple and cool, isn’t it?