Adding a cancel button to UITextField keyboard

Question

Is there a way to add a cancel button to the keyboard displayed for UITextField? Looking over the UITextInputTraits Protocol Reference, I could not find anything, including trying out the different keyboard types.

Kagera

Answer 1

You can create a input accessory view which can display a UIToolBar Above the keyboard and then add a cancel button to this. Take a look at the documentation link below for the inputAccessoryView property.

http://developer.apple.com/library/ios/#documentation/uikit/reference/UITextField_Class/Reference/UITextField.html

This is an example of one I did for a TextView. The create Input Accessory View method is called from "textViewDidBeginEditing". Then it creates the input accessory view and in my case adds three buttons and a space bar.

I hope that helps.

-(void)textViewDidBeginEditing:(UITextView *)textView {

[self createInputAccessoryView];
[textView setInputAccessoryView:_inputAccessoryView];
self.myTextView = textView;  }

-(void)createInputAccessoryView {

_inputAccessoryView = [[UIToolbar alloc] init];
_inputAccessoryView.barStyle = UIBarStyleBlackOpaque;
[_inputAccessoryView sizeToFit];

_inputAccessoryView.frame = CGRectMake(0,_collageView.frame.size.height - 44, _collageView.frame.size.width, 44);

UIBarButtonItem *fontItem = [[UIBarButtonItem alloc] initWithTitle:@"Font"
                                                             style:UIBarButtonItemStyleBordered
                                                            target:self action:@selector(changeFont:)];
UIBarButtonItem *removeItem = [[UIBarButtonItem alloc] initWithTitle:@"Remove"
                                                             style:UIBarButtonItemStyleBordered
                                                            target:self action:@selector(removeTextView:)];
//Use this to put space in between your toolbox buttons
UIBarButtonItem *flexItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
                                                                          target:nil
                                                                          action:nil];
UIBarButtonItem *doneItem = [[UIBarButtonItem alloc] initWithTitle:@"Done"
                                                             style:UIBarButtonItemStyleDone
                                                            target:self action:@selector(dismissKeyBoard:)];

NSArray *items = [NSArray arrayWithObjects:fontItem,removeItem,flexItem,doneItem, nil];
[_inputAccessoryView setItems:items animated:YES];
[_myTextView addSubview:_inputAccessoryView];
}

Antineutron

Thanks for this, although if you were just doing a cancel button, wouldn't putting a cancel UIBarButtonItem next to the UITextField accomplish the same thing without an accessory view? – Kagera

Come to think of it, that's exactly what I would do. This is a really good answer though and it definitely solves my issue, gonna mark it as accepted then. – Kagera

@kevinhorgan why you didn't assigned self.myTextView to the input property straight away? – Tamandua

Answer 2

I just dropped a UIToolbar into my view controller in Interface Builder, then:

@property IBOutlet UIToolbar *keyboardAccessory;

-(void) viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    // this is so I can edit it in Interface Builder, but it doesn't show in the view
    [keyboardAccessory removeFromSuperview];
}

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

-(IBAction) pressedCancelButton {
    [self.view endEditing:YES];
}

Voila!

Schelling

Answer 3

Andrew, how's it going? it's Dima R!

As far as I know, there is no great way to do what you're trying to do. You can easily pick from one of the built in types that are listed here

typedef enum {
   UIReturnKeyDefault,
   UIReturnKeyGo,
   UIReturnKeyGoogle,
   UIReturnKeyJoin,
   UIReturnKeyNext,
   UIReturnKeyRoute,
   UIReturnKeySearch,
   UIReturnKeySend,
   UIReturnKeyYahoo,
   UIReturnKeyDone,
   UIReturnKeyEmergencyCall,
} UIReturnKeyType;

What you could do is either add a view on top of the keyboard that contains your cancel button, or try to traverse through the view hierarchy and overlay what you want on the button that way (although this method is unreliable). Unfortunately, this is one thing Apple has not provided much customization for yet.

edit: Actually I think I misread your question from the start, since you wouldn't want a cancel button as the main return button anyways. In this case, the input accessory view is definitely the way to go.

Tarnation

Whoa what a throwback, nice to see you on here dude. And thanks for the answer. Yeah I'd like to give the user an extra cancel button, in case they want to cancel text input. – Kagera

Kevin Horgan's answer is the one you want, it's the correct way to achieve that. – Tarnation