Adding the "Clear" Button to an iPhone UITextField

Question

How do you add that little "X" button on the right side of a UITextField that clears the text? I can't find an attribute for adding this sub-control in Interface Builder in the iPhone OS 2.2 SDK.

Note: In Xcode 4.x and later (iPhone 3.0 SDK and later), you can do this in Interface Builder.

Kristopher Johnson · Accepted Answer · 2020-03-25T17:46:38.530

375

This button is a built-in overlay that is provided by the UITextField class, but as of the iOS 2.2 SDK, there isn't any way to set it via Interface Builder. You have to enable it programmatically.

Add this line of code somewhere (viewDidLoad, for example):

Objective-C

myUITextField.clearButtonMode = UITextFieldViewModeWhileEditing;

Swift 5.0

myUITextField.clearButtonMode = .whileEditing

edited Mar 25 '20 at 17:46

answered Nov 26 '08 at 08:45

Kristopher Johnson

81,409
55
245
302

score 66 · Answer 2 · answered May 30 '14 at 02:30

66

You can also set this directly from Interface Builder under the Attributes Inspector.

enter image description here

Taken from XCode 5.1

answered May 30 '14 at 02:30

Nicholas Harlen

1,114
1
11
11

1

Note that the question specifically asks about the 2.2 SDK, and notes that this option is available in Interface Builder in later versions. – Kristopher Johnson May 30 '14 at 16:03

score 51 · Answer 3 · edited Jul 06 '19 at 13:38

51

Swift 4+:

textField.clearButtonMode = UITextField.ViewMode.whileEditing

or even shorter:

textField.clearButtonMode = .whileEditing

edited Jul 06 '19 at 13:38

Joshua Wolff

2,687
1
25
42

answered Oct 06 '15 at 20:38

Esqarrouth

38,543
21
161
168

Fix enum type. Must not start from capital letter. – T. Pasichnyk Jun 20 '17 at 11:40

score 35 · Answer 4 · answered Aug 06 '13 at 10:47

you can add custom clear button and control the size and every thing using this:

UIButton *clearButton = [UIButton buttonWithType:UIButtonTypeCustom];
[clearButton setImage:img forState:UIControlStateNormal];
[clearButton setFrame:frame];
[clearButton addTarget:self action:@selector(clearTextField:) forControlEvents:UIControlEventTouchUpInside];

textField.rightViewMode = UITextFieldViewModeAlways; //can be changed to UITextFieldViewModeNever,    UITextFieldViewModeWhileEditing,   UITextFieldViewModeUnlessEditing
[textField setRightView:clearButton];

score 8 · Answer 5 · edited Jul 06 '19 at 13:39

8

Objective C :

self.txtUserNameTextfield.myUITextField.clearButtonMode = UITextFieldViewModeWhileEditing;

Swift :

txtUserNameTextfield.clearButtonMode = UITextField.ViewMode.WhileEditing;

edited Jul 06 '19 at 13:39

Joshua Wolff

2,687
1
25
42

answered Feb 03 '16 at 10:45

PT Vyas

722
9
31

score 8 · Answer 6 · answered Oct 22 '18 at 11:21

8

Swift 4 (adapted from Kristopher Johnson's answer)

textfield.clearButtonMode = .always

textfield.clearButtonMode = .whileEditing

textfield.clearButtonMode = .unlessEditing

textfield.clearButtonMode = .never

answered Oct 22 '18 at 11:21

Edouard Barbier

1,815
2
19
32

score 7 · Answer 7 · edited Jul 06 '19 at 13:39

7

this don't work, do like me:

swift:

customTextField.clearButtonMode = UITextField.ViewMode.Always

customTextField.clearsOnBeginEditing = true;

func textFieldShouldClear(textField: UITextField) -> Bool {
    return true
}

edited Jul 06 '19 at 13:39

Joshua Wolff

2,687
1
25
42

answered Jun 23 '16 at 02:51

Tritmm

1,972
18
14

score 7 · Answer 8 · edited Jul 06 '19 at 13:39

7

On Xcode 8 (8A218a):

Swift:

textField.clearButtonMode = UITextField.ViewMode.whileEditing;

The "W" went from capital to non-cap "w".

edited Jul 06 '19 at 13:39

Joshua Wolff

2,687
1
25
42

answered Sep 21 '16 at 08:40

Aidan.C

51
2
3

score 1 · Answer 9 · answered May 28 '18 at 04:13

  func clear_btn(box_is : UITextField){
    box_is.clearButtonMode = .always
    if let clearButton = box_is.value(forKey: "_clearButton") as? UIButton {
        let templateImage =  clearButton.imageView?.image?.withRenderingMode(.alwaysTemplate)

        clearButton.setImage(templateImage, for: .normal)
        clearButton.setImage(templateImage, for: .highlighted)

        clearButton.tintColor = .white

     }
}

score 0 · Answer 10 · edited Jan 29 '22 at 05:18

0

Use below lines of code. If rightView is there clear button is not showing.

self.txtField.rightView = nil
self.txtField.rightViewMode = .never
self.txtField.clearButtonMode = UITextField.ViewMode.always

edited Jan 29 '22 at 05:18

Dharman

30,962
25
85
135

answered Jan 29 '22 at 05:12

Payal Maniyar

4,293
3
25
51

score -4 · Answer 11 · answered Nov 05 '16 at 14:14

-4

On Xcode Version 8.1 (8B62) it can be done directly in Attributes Inspector. Select the textField and then choose the appropriate option from Clear Button drop down box, which is located in Attributes Inspector.

answered Nov 05 '16 at 14:14

carlson

148
2
6

Adding the "Clear" Button to an iPhone UITextField

11 Answers11

Linked

Related