How to add done button on keyboard on top of keyboard in IOS?

Question

I want to add the Done button on the top of keyboard on right side in iOS for a textView.Please tell me how can i do that?

I want to achieve something similar to the above keyboard

Answer 1

It can be done using storyboard:

1. Add UITextField to UIViewController view.
2. Add UIToolbar in the first level of UIViewController
3. Add UIBarButtonItem into the UIToolbar.
4. Connect UItoolbar to the code using IBOutlet.
5. Connect UIBarButtonItem to the code using IBAction (as didClick).
6. Make the UITextField will be delegating to UIViewController.
7. In the didClick function end editing (view.endEditing(true))
8. In the delegate function textFieldShouldBeginEditing should be: textField.inputAccessoryView = toolbar and returns true.

Answer 2

Hope this help :)

UIToolbar* keyboardToolbar = [[UIToolbar alloc] init];
[keyboardToolbar sizeToFit];
UIBarButtonItem *flexBarButton = [[UIBarButtonItem alloc]
                                  initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
                                  target:nil action:nil];
UIBarButtonItem *doneBarButton = [[UIBarButtonItem alloc]
                                  initWithBarButtonSystemItem:UIBarButtonSystemItemDone
                                  target:self action:@selector(yourTextViewDoneButtonPressed)];
keyboardToolbar.items = @[flexBarButton, doneBarButton];
self.yourTextView.inputAccessoryView = keyboardToolbar;

and then add yourTextViewDoneButtonPressed method

-(void)yourTextViewDoneButtonPressed
{
    [self.yourTextView resignFirstResponder];
}

Answer 3

Swift 3:

func setDoneOnKeyboard() {
    let keyboardToolbar = UIToolbar()
    keyboardToolbar.sizeToFit()
    let flexBarButton = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
    let doneBarButton = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(InsertStatusVC.dismissKeyboard))
    keyboardToolbar.items = [flexBarButton, doneBarButton]
    self.fullNameTextField.inputAccessoryView = keyboardToolbar
}

@objc func dismissKeyboard() {
    view.endEditing(true)
}

Answer 4

This Solution For Swift3/4

Add This line To your Project As a extension Your Problem is solved.

  extension UITextField{

        @IBInspectable var doneAccessory: Bool{
            get{
                return self.doneAccessory
            }
            set (hasDone) {
                if hasDone{
                    addDoneButtonOnKeyboard()
                }
            }
        }

        func addDoneButtonOnKeyboard()
        {
            let doneToolbar: UIToolbar = UIToolbar(frame: CGRect.init(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 50))
            doneToolbar.barStyle = .default

            let flexSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
            let done: UIBarButtonItem = UIBarButtonItem(title: "Done", style: .done, target: self, action: #selector(self.doneButtonAction))

            let items = [flexSpace, done]
            doneToolbar.items = items
            doneToolbar.sizeToFit()

            self.inputAccessoryView = doneToolbar
        }

        @objc func doneButtonAction() {
            self.resignFirstResponder()
        }

    }

Before extension

After extension

Answer 5

Add UIToolBar as custom view that will have UIBarButtonItem as Done button in it.

This is safer and cleaner way to add Done button to any Type of Keyboard. Create UIToolBar add Done Button to it and set inputAccessoryView of any UITextField or UITextView. ]; }

SWIFT 3

var ViewForDoneButtonOnKeyboard = UIToolbar()
ViewForDoneButtonOnKeyboard.sizeToFit()
var btnDoneOnKeyboard = UIBarButtonItem(title: "Done", style: .bordered, target: self, action: #selector(self.doneBtnFromKeyboardClicked))
ViewForDoneButtonOnKeyboard.items = [btnDoneOnKeyboard]
myTextField.inputAccessoryView = ViewForDoneButtonOnKeyboard

Function

  @IBAction func doneBtnfromKeyboardClicked (sender: Any) {
     print("Done Button Clicked.")
    //Hide Keyboard by endEditing or Anything you want.
    self.view.endEditing(true)
  }

Answer 6

Solution for Swift 4 and Swift 5 using a custom class. You can use this class in your Storyboard and .xib files.

class UITextFieldWithDoneButton: UITextField {
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.addDoneButtonOnKeyboard()
    }

    fileprivate func addDoneButtonOnKeyboard() {
        let doneToolbar: UIToolbar = UIToolbar(frame: CGRect.init(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 50))
        doneToolbar.barStyle = .default

        let flexSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
        let done: UIBarButtonItem = UIBarButtonItem(title: "Done", style: .done, target: self, action: #selector(self.doneButtonAction))

        let items = [flexSpace, done]
        doneToolbar.items = items
        doneToolbar.sizeToFit()

        self.inputAccessoryView = doneToolbar
    }

    @objc fileprivate func doneButtonAction() {
        self.resignFirstResponder()
    }
}

Answer 7

The answer from Ramis that allows the keyboard accessory view to be created using the Storyboard is a great strategy. It is 2017 after all! (Sorry, but I do not have enough points to upvote you.)

Let me add a little to the answer (to keep within the SO rules). I have a view with multiple textFields. After implementing each of Ramis' steps I attached the accessoryView to all of the textFields in this way:

-(void)textFieldDidBeginEditing:(UITextField *)textField
{
_activeTextField = textField;
[_activeTextField setInputAccessoryView:_iboKeyboardTools];
}

So easy compared with implementing all this in code! Just build the accessory view in Storyboard- and attach it again and again!

Answer 8

This Solution For Swift 4

override func viewDidLoad() {
   super.viewDidLoad()
   //init toolbar
   let toolbar:UIToolbar = UIToolbar(frame: CGRect(x: 0, y: 0,  width: self.view.frame.size.width, height: 30))
   //create left side empty space so that done button set on right side
   let flexSpace = UIBarButtonItem(barButtonSystemItem:    .flexibleSpace, target: nil, action: nil)
   let doneBtn: UIBarButtonItem = UIBarButtonItem(title: “Done”, style: .done, target: self, action: Selector(“doneButtonAction”))
   toolbar.setItems([flexSpace, doneBtn], animated: false)
   toolbar.sizeToFit()
   //setting toolbar as inputAccessoryView
   self.textField1.inputAccessoryView = toolbar
   self.textField2.inputAccessoryView = toolbar
}
func doneButtonAction() {
   self.view.endEditing(true)
}