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.

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];
}

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!

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.