TextField

It can be defined as an object which is used to display an editable text area in the interface. Textfields are used to get the text-based input from the user.

As we have discussed for the label, we can also customize the text field by giving attributes. There are scenarios where we might need to configure the keyboard as well, for example, to restrict the user from entering the numbers only. Textfield uses the target action mechanism and a delegate object to report changes made during editing.

The following steps are used to configure the text field.

  1. Search for the TextField in the object library and drag the result to the storyboard.
  2. Configure one or more targets and actions for the text field.
  3. Customize the keyboard-related attributes for the text field.
  4. Perform text field delegate object tasks to report the changes made while editing.
    1. The text field delegate method is called when the user changes the text field content.
    2. Validating the text entered by the user.
    3. Delegate method is called when the keyboard's return button is tapped.
  5. Create an outlet of the text field in the corresponding ViewController class.

Example

Here, we will create a form using text fields and labels. We will also apply some validations on the text field. If the validation fails, then an alert will be shown to the user; otherwise, a success message will be displayed to the user.

Interface builder

To create the interface for the project, we will use text fields for getting the data from the user, associated with the labels for showing the messages to the user.

We will not use Button in the application, as it is not covered yet in this tutorial; instead, we are using clickable labels to trigger the events.

Create the interface by searching for the appropriate objects in the object library and drag the result into the storyboard.

The following View is created in the project to get the information from the user.

iOS TextField

How to show the success message on the successful registration?

In iOS development, we generally create another screen on the successful completion of any task. However, in this example, we will create a UIView containing the success message on the same screen and keep it hidden until the validation succeeds in on the submit label tapped.

The interface after adding the createUserSuccessView is shown in the following image.

iOS TextField

Outlets

The outlets are created of the objects in the Associated View Controller class. All the connecting outlets can be shown in the connection inspector in XCode, as shown in the following image.

iOS TextField

ViewController.swift

Output:

iOS TextField

Configure the keyboard

The text field can become the first responder by calling the becomeFirstResponder() method on the text field outlet. When the text field becomes the first responder, the keyboard automatically becomes visible, and the keyboard input is bound to the text field. When the user taps onto the text field, the text field becomes the first responder, i.e., the keyboard becomes visible.

To dismiss the keyboard, the resignFirstResponder() method is called on the text field outlet. We may need to dismiss the keyboard in response to some specific interactions. The keyboard is automatically dismissed when the user presses the return key.

The editing state of the textfield is affected by the appearance and dismissal of the keyboard. When the user starts editing the textfield on the appearance of the keyboard, the textfield sends the appropriate notification to its delegate. The delegate methods are also notified when the editing begins and ends.

TextField Delegate Methods

SNMethod SignatureDescription
1func textFieldShouldBeginEditing(UITextField) -> BoolIt asks the delegate if editing should begin the respective textfield.
2func textFieldDidBeginEditing(UITextField)It tells the delegate that the editing is started in the textfield.
3func textFieldShouldEndEditing(UITextField) -> BoolIt asks the delegate to end the editing in the textfield.
4func textFieldDidEndEditing(UITextField, reason: UITextField.DidEndEditingReason)It tells the delegate that the editing has been stopped for the specified textfield.
5func textFieldDidEndEditing(UITextField)It is the overloaded methods which also does the same as the above.
6func textField(UITextField, shouldChangeCharactersIn: NSRange, replacementString: String) -> BoolIt asks the delegate that if the text field's current content should be changed.
7func textFieldShouldClear(UITextField) -> BoolIt asks the delegate if the text field's current content should be removed.

Interface builder Attributes

TextField Attributes

SNAttributeDescriptionProperty
1textIt represents the current text the textfiled contains. It can be accessed by the text property of the textfield at runtime.text
2colorIt represents the color of the textfield text. This can be accessed by using the textColor property of the TextField.textColor
3fontIt represents the font of the text field's text. This can be accessed by using the font property of the textfield object.font
4alignmentIt represents the alignment of the text inside the editing area.textAlignment
5placeholderIt represents the placeholder string of the textfield. When the textfield is empty, this string is displayed to guide the user.placeholder
6backgroundIt represents the background image to display when the textfield is enabled. The background image is displayed behind the textfield content.background
7disabledIt represents the background image to display when the textfield is disabled.disabledBackground
8border styleIt represents the visual style of the textfield border.borderStyle
9clear buttonThe clear button is an overlay view that can be tapped by the user to delete all the content of the textfield. This attribute can be used to set the appearance of the clear button within the textfield.clearButtonMode
10Min font sizeThe minimum font size for the text field's text. When the Adjust to Fit option is enabled, the text field automatically varies the font size to ensure maximum legibility of the text.minFontSize

Keyboard Attributes

SNAttributeDescriptionProperty
1CapitalizationThis attribute applies the automatic capitalization style to the typed text within the text field.autocapitalizationType
2CorrectionThis attribute is used to determine whether the auto-correction is enabled or not while typing.autocorrectionType
3Spell CheckingIt is used to determine whether the spelling checking enabled or not while typing.spellCheckingType
4Keyboard TypeThis property sets the type of the keyboard displayed while typing.keyboardType
5AppearanceIt is used to set the appearance of the textfield. It specifies a dark or light keyboard.keyboardAppearance
6Return KeyIt is used to set the type of the return key to display on the keyboard.returnKeyType

Next TopicDatePicker




Latest Courses