How can I add a toolbar above the keyboard?

Question

I have created a UIToolBar programmatically and added a UITextField on it. Now, I need that toolbar to be above the keyboard when I click in another text field.

UIToolbar *toolBar=[[UIToolbar alloc]initWithFrame:CGRectMake(0,400, 320, 60)];
[self.view addSubview:toolBar];

UITextField *txtView=[[UITextField alloc]initWithFrame:CGRectMake(0, 400, 260, 30)];
txtView.backgroundColor =[UIColor  grayColor];
txtView.placeholder=@"Address";
UIBarButtonItem *txtfieldItem=[[UIBarButtonItem alloc]initWithCustomView:txtView];
toolBar.items =[NSArray arrayWithObject:txtfieldItem];

you already have the answer here. plz check into it... http://stackoverflow.com/a/10594891/3615320 — Chan, May 28 '14 at 07:11
possible duplicate of [How to get keyboard with Next, Previous and Done Button?](http://stackoverflow.com/questions/5591792/how-to-get-keyboard-with-next-previous-and-done-button) — Leena, May 28 '14 at 08:31
There is a newer way to do it than using a UIToolBar, http://pinkstone.co.uk/how-to-add-your-own-shortcuts-above-the-keyboard-in-ios-9/ — neoneye, Jul 04 '17 at 10:29

score 132 · Accepted Answer · edited Jan 30 '19 at 22:38

UIToolbar* numberToolbar = [[UIToolbar alloc]initWithFrame:CGRectMake(0, 0, [[UIScreen mainScreen] bounds].size.width, 50)];
numberToolbar.barStyle = UIBarStyleBlackTranslucent;
numberToolbar.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];
[numberToolbar sizeToFit];
phonenumberTextField.inputAccessoryView = numberToolbar;

To Dismiss Keyboard:

[[UIApplication sharedApplication] sendAction:@selector(resignFirstResponder) to:nil from:nil forEvent:nil];

Swift 3:

let numberToolbar = UIToolbar(frame: CGRectMake(0, 0, UIScreen.mainScreen().bounds.width, 50))
numberToolbar.barStyle = UIBarStyle.Default
numberToolbar.items = [
            UIBarButtonItem(title: "Cancel", style: UIBarButtonItemStyle.Plain, target: self, action: "cancelNumberPad"),
            UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil),
            UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.Plain, target: self, action: "doneWithNumberPad")]
    numberToolbar.sizeToFit()
    phonenumberTextField.inputAccessoryView = numberToolbar

Swift 4.2:

let numberToolbar = UIToolbar(frame:CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 50))
numberToolbar.barStyle = .default
numberToolbar.items = [
UIBarButtonItem(title: "Cancel", style: .plain, target: self, action: #selector(cancelNumberPad)),
UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil),
UIBarButtonItem(title: "Done", style: .plain, target: self, action: #selector(doneWithNumberPad))]
numberToolbar.sizeToFit()
phonenumberTextField.inputAccessoryView = numberToolbar

...

@objc func cancelNumberPad() {
    //Cancel with number pad
}
@objc func doneWithNumberPad() {
    //Done with number pad
}

Or it can be done using storyboard like [here](http://stackoverflow.com/a/41546987/1151916) — Ramis, Jan 09 '17 at 11:28
you can add this to all textfields by doing `UITextField.appearance().inputAccessoryView = /* your tool bar setup code */` — Charlton Provatas, Mar 15 '18 at 15:14
in swift 4 selector should be like this: UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.done, target: self, action: #selector(self.OnTapDone(_:))) — Mashhadi, Apr 11 '18 at 19:26
Toolbar width should be set based on screen-size not view-size, editing that in now along with a method to dismiss keyboard — Albert Renshaw, Jun 20 '18 at 16:36

score 101 · Answer 2 · answered Dec 09 '16 at 11:12

101

You do not need to do this in code anymore.

Just simply drag UIView to the top bar of current scene and customize it as you want.

In code simply put IBOutlet for both: toolbarView and textView and make connections.

@IBOutlet private var toolbarView: UIView!
@IBOutlet private var textView: UITextView!

In viewDidLoad setup your toolbarView as accessoryView of your UItextView.

override func viewDidLoad() {
    super.viewDidLoad()

    textView.inputAccessoryView = toolbarView
}

The result is following:

answered Dec 09 '16 at 11:12

Bartłomiej Semańczyk

52,820
43
206
318

12

Wow. I've been doing it the hard way for years; and people say storyboards are useless! – Allison Jun 18 '17 at 01:48
1

As Mr House says: people lie;) – Bartłomiej Semańczyk Jun 18 '17 at 08:14
This is incredible!! Works great. – AnBisw Oct 19 '17 at 03:38
This is really great. @Sirens yeah, me too, I've been doing it the hard way for years. :D Luckily I got lazy today to google another way :D – jayellos Nov 06 '17 at 01:37
1

Wasn't aware you could do this. Awesome! – Mike Simz Nov 09 '17 at 16:04
1

for alertView input text you can use this: alert.textFields?.first?.inputAccessoryView = toolbarView – oscar castellon Dec 01 '17 at 19:02
This is really great :) useful for textfields too. – R. Mohan Jul 30 '18 at 14:35
So simple, it's the best way to do it ! – Adrien Brecheteau Jan 07 '19 at 18:20
Excellent easy to use – mirhpe danielle Jun 07 '19 at 12:34
Really simple to implement – Sayantan Sep 29 '20 at 03:44

Sunkas · Answer 3 · 2015-10-19T09:09:59.820

For swift (1.2):

let numberToolbar = UIToolbar(frame: CGRectMake(0, 0, self.view.frame.size.width, 50))
numberToolbar.barStyle = UIBarStyle.Default

numberToolbar.items = [
    UIBarButtonItem(title: "Cancel", style: UIBarButtonItemStyle.Plain, target: self, action: "keyboardCancelButtonTapped:"),
    UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil),
    UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.Plain, target: self, action: "keyboardDoneButtonTapped:")]

numberToolbar.sizeToFit()
yourTextView.inputAccessoryView = numberToolbar

score 9 · Answer 4 · edited Mar 17 '15 at 09:09

You Can Use this code it work for me.

-(void)viewdidload
{
 UIToolbar* keyboardDoneButtonView = [[UIToolbar alloc] init];
 [keyboardDoneButtonView sizeToFit]; 
 UIBarButtonItem* doneButton = [[UIBarButtonItem alloc] initWithTitle:@"Done"
                                                        style:UIBarButtonItemStyleBordered target:self
                                                                  action:@selector(doneClicked:)];
  [keyboardDoneButtonView setItems:[NSArray arrayWithObjects:doneButton, nil]];
  textField.inputAccessoryView = keyboardDoneButtonView;
 }
-(void)doneClicked:(id)sender
{
NSLog(@"Done Clicked.");
[self.view endEditing:YES];
}

score 7 · Answer 5 · edited Mar 09 '18 at 17:56

7

You can use the UITextFields inputAccessoryView property

    txtField.inputAccessoryView = toolBar;

edited Mar 09 '18 at 17:56

Shujito

3,023
2
15
17

answered May 28 '14 at 07:07

Anil Varghese

41,329
9
90
110

score 4 · Answer 6 · edited Oct 09 '16 at 07:24

Swift 3

    let toolBar = UIToolbar(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 50))
    toolBar.barStyle = UIBarStyle.default
    toolBar.items = [
        UIBarButtonItem(title: "Button1", style: UIBarButtonItemStyle.plain, target: self, action: #selector(test2)),
        UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace, target: nil, action: nil),
        UIBarButtonItem(title: "Button2", style: UIBarButtonItemStyle.plain, target: self, action: #selector(test1))]
    toolBar.sizeToFit()

    myTextField.inputAccessoryView = toolBar

DURGESH · Answer 7 · 2016-02-22T12:46:47.500

1

textField.inputAccessoryView=[weakSelf addToolBar];
[textField setKeyboardType:UIKeyboardTypeNumberPad];

and add a method

-(UIToolbar *)addToolBar
{

    UIBarButtonItem *done=[[UIBarButtonItem alloc]initWithTitle:@"DONE" style:UIBarButtonItemStyleDone target:self action:@selector(done:)];
    UIToolbar *toolBar=[[UIToolbar alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 30)];
    NSArray* toolBarItems=[[NSArray alloc]initWithObjects:done, nil];
    [toolBar setItems:toolBarItems];
    return toolBar;
}

edited Feb 22 '16 at 12:46

answered Feb 22 '16 at 10:36

DURGESH

1,585
12
13

The first part is add the toolbar in the top of keyboard. and second is created toolbar – DURGESH Feb 22 '16 at 12:44
Thank you for interesting in ios – DURGESH Mar 11 '16 at 11:16
@DURGESHKUMAR Can you please explain this line? textField.inputAccessoryView=[weakSelf addToolBar]; – Gajendra K Chauhan Feb 10 '17 at 14:48

score 0 · Answer 8 · answered Jul 29 '20 at 08:16

Swift 5.0 and above

           let toolBar = UIToolbar(frame: CGRect(x: 0.0,
                                                  y: 0.0,
                                                  width: UIScreen.main.bounds.size.width,
                                                  height: 44.0))//1
            let flexibleSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)//2
            let DoneButton = UIBarButtonItem(title: "Done", style: .plain, target: target, action: #selector(tapDone))//3
            toolBar.setItems([flexibleSpace, DoneButton], animated: false)
           textField.inputAccessoryView = toolBar
       // Done Action
        @objc func tapDone() {
           self.view.endEditing(true)
         }

score -1 · Answer 9 · answered Jan 31 '18 at 11:08

In Swift 3 and 4

 let toolBar = UIToolbar()
 toolBar.barStyle = UIBarStyle.default
 toolBar.isTranslucent = true
 toolBar.isUserInteractionEnabled = true
 toolBar.sizeToFit()
 toolBar.items = [
        UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.plain, target: self, action: #selector(self.sendCodeBtnAction(sender:)))]

    tfPhone.inputAccessoryView = toolBar

How can I add a toolbar above the keyboard?

9 Answers9

Linked