The Battle Between TextFields and the Keyboard

Photo by on

When not using a UITableViewController you may have noticed an issue where your text field, if located lower on the screen gets hidden when the keyboard appears on screen.

Thankfully, there is a quick fix for this when used in conjunction with a scroll view. If you haven’t quite mastered scroll views yet, check out my .

In this example, I will start out with a View Controller with a scroll view, a label and 3 text fields.

First, you will need to add two observers, one to listen for when the keyboard will show and another for when the keyboard will hide.

This code will listen for the notifications and execute the keyboardWillShowOrHide function when the notification is posted.

The notification for when the keyboard will show will also include the keyboard size which will be used in the function to adjust the content view so that the text field will be displayed above the keyboard.

The notification for when the keyboard will hide will reverse the adjustment of the content view.

So to recap, when the text field is tapped, a notification is sent and the observer will call the function that will scroll the view up so the text field moves above the keyboard.

* The +15 in the code below is just to give it a little padding above the keyboard.

For good measure, I also added an unregisterFromAllNotifications function to remove the Observer when the view will disappear.

Now that we have the functions in place it’s time to get down to business. First up you will need to add an IBOutlet for the scrollView and connect it in your View Controller.

Next, call the registerForKeyboardNotifications function in viewDidLoad.

* We will get to the hideKeyboardTappedAround function call later. That’s a little added bonus!

Then, call the unregisterFromAllNotifications function for when the viewWillDisappear. That’s it for making your text field move above the keyboard!

There’s a little saying, what goes up must come down, and so it is with the keyboard. To make the keyboard go away, add the two functions below and when you click anywhere outside of the textfield or keyboard, the keyboard will be dismissed. The battle has been won!

If you are looking for more bells and whistles, check out .

Happy coding!

--

--

--

Web / iOS Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Collections in Kotlin

Subtree Node Depths | Rust

Type of a column is boolean, you must not use “as_boolean” in input field. 【Ruby on Rails】

No matter where you are on the journey in some way you are continuing on and that’s what makes it…

flaws.cloud — A fun interactive way to learn the basics of AWS Security

Django User Groups with Django Rest Framework

New and Delete in Cpp 11/14/17

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kelly O’

Kelly O’

Web / iOS Developer

More from Medium

How to Find, Create, Open, Edit and Delete .bash_profile in macOS

How Low-Code Accelerates Agile Development?

ITerm 2 & ZSH script for Git Branch

Named threads and other ways to organize chats