Posted by & filed under Code.

There are some cases when you may want to have a “Done” or “Cancel” button on an iOs number pad when editing a text field. This doesn’t come by default, but is easy to add. See the example snippets below, or check out the code on github.

Sample Usage:

//In the view controller that's going ot use the component, put this in the header after the class being extended.
<DoneCancelNumberPadToolbarDelegate>
 
// Then instantiate your toolbar component where it's needed
DoneCancelNumberPadToolbar *toolbar = [[DoneCancelNumberPadToolbar alloc] initWithTextField:textField];
toolbar.delegate = self;
textField.inputAccessoryView = toolbar;
 
// Finally, implement the following two delegate methods
 
#pragma mark - DoneCancelNumberpadToolbar delegate
-(void)doneCancelNumberPadToolbarDelegate:(DoneCancelNumberPadToolbar *)controller didClickDone:(UITextField *)textField
{
    NSLog(@"%@", textField.text);
}
 
-(void)doneCancelNumberPadToolbarDelegate:(DoneCancelNumberPadToolbar *)controller didClickCancel:(UITextField *)textField
{
    NSLog(@"Canceled: %@", [textField description]);
}

DoneCancelNumberPadToolbar.h

#import <UIKit/UIKit.h>

@class DoneCancelNumberPadToolbar;

@protocol DoneCancelNumberPadToolbarDelegate <NSObject>

-(void)doneCancelNumberPadToolbarDelegate:(DoneCancelNumberPadToolbar *)controller didClickDone:(UITextField *)textField;
-(void)doneCancelNumberPadToolbarDelegate:(DoneCancelNumberPadToolbar *)controller didClickCancel:(UITextField *)textField;

@end

@interface DoneCancelNumberPadToolbar : UIToolbar
{
    UITextField* textField;
}

DoneCancelNumberPadToolbar.m

#import "DoneCancelNumberPadToolbar.h"

@implementation DoneCancelNumberPadToolbar

@synthesize delegate;

- (id) initWithTextField:(UITextField *)aTextField
{
    self = [super initWithFrame:CGRectMake(0, 0, 320, 50)];
    if (self) {
        textField = aTextField;
        self.barStyle = UIBarStyleBlackTranslucent;
        self.items = [NSArray arrayWithObjects:
                      [[UIBarButtonItem alloc]initWithTitle:@"Cancel"
                                                      style:UIBarButtonItemStyleBordered
                                                     target:self
                                                     action:@selector(cancelNumberPad)],
                      [[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
                                                                   target:nil action:nil],
                      [[UIBarButtonItem alloc]initWithTitle:@"Done"
                                                      style:UIBarButtonItemStyleDone
                                                     target:self
                                                     action:@selector(doneWithNumberPad)],
                      nil];
        [self sizeToFit];
        
    }
    return self;
}

-(void)cancelNumberPad
{
    [textField resignFirstResponder];
    textField.text = @"";
    [self.delegate doneCancelNumberPadToolbarDelegate:self didClickCancel:textField];
}

-(void)doneWithNumberPad
{
    [textField resignFirstResponder];
    [self.delegate doneCancelNumberPadToolbarDelegate:self didClickDone:textField];
}
@end

@property (nonatomic, weak) id <DoneCancelNumberPadToolbarDelegate> delegate;

- (id) initWithTextField:(UITextField *)textField;

@end

Special thanks to akozlik for the help with delegates.

  • Jon

    I understand this process, but I got a page that has four textfields that have the numberpad attribute. So I like this ability to be on all four textfields, but I found that when I cleared, it cleared them all, not the individual field. Any advise is greatly appreciated.

    • http://twitter.com/timothybroder Tim Broder

      How are you clearing them?

      • Jon

        The cancel number pad function. I have multiple textfields. I am a newb still (this is my first iOS app actually) so perhaps I misunderstood something here.