How to show "Done" button on iOS number pad keyboard?

Viewed 160470

There is no "Done" button on the .numberPad Keyboard Type. When a user finishes entering numeric information in a text field, how can I make the number pad disappear?

I could get a "Done" button by using the default keyboard, but then users would have to switch to the numeric keys in order to input numbers. Is there a way to show a "Done" button on the number pad?

21 Answers

The trick I've seen used is to make a custom transparent button the size of the whole view and then in its click method, have the text field resign first responder. So the user can click anywhere outside of the field to dismiss the keypad.

If you have multiple numeric fields, I suggest subclassing UITextField to create a NumericTextField that always displays a numeric keyboard with a done button. Then, simply associate your numeric fields with this class in the Interface Builder and you won't need any additional code in any of your View Controllers. The following is Swift 3.0 class that I'm using in Xcode 8.0.

class NumericTextField: UITextField {
   let numericKbdToolbar = UIToolbar()

    // MARK: Initilization
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.initialize()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.initialize()
    }

    // Sets up the input accessory view with a Done button that closes the keyboard
    func initialize()
    {
        self.keyboardType = UIKeyboardType.numberPad

        numericKbdToolbar.barStyle = UIBarStyle.default
        let space = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace, target: nil, action: nil)
        let callback = #selector(NumericTextField.finishedEditing)
        let donebutton = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.done, target: self, action: callback)
        numericKbdToolbar.setItems([space, donebutton], animated: false)
        numericKbdToolbar.sizeToFit()
        self.inputAccessoryView = numericKbdToolbar
    }

    // MARK: On Finished Editing Function
    func finishedEditing()
    {
        self.resignFirstResponder()
    }
}

Swift 4.2

class NumericTextField: UITextField {
    let numericKbdToolbar = UIToolbar()

    // MARK: Initilization
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.initialize()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.initialize()
    }

    // Sets up the input accessory view with a Done button that closes the keyboard
    func initialize()
    {
        self.keyboardType = UIKeyboardType.numberPad

        numericKbdToolbar.barStyle = UIBarStyle.default
        let space = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.flexibleSpace, target: nil, action: nil)
        let callback = #selector(NumericTextField.finishedEditing)
        let donebutton = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.done, target: self, action: callback)
        numericKbdToolbar.setItems([space, donebutton], animated: false)
        numericKbdToolbar.sizeToFit()
        self.inputAccessoryView = numericKbdToolbar
    }

    // MARK: On Finished Editing Function
    @objc func finishedEditing()
    {
        self.resignFirstResponder()
    }
}
 let pickerView = UIPickerView()
   
 var yearpickerToolbar: UIToolbar?
   
    func createPickerView() {
          
           pickerView.delegate = self
           textfield.inputView = pickerView }
   
   
     func dismissPickerView() {
           let toolBar = UIToolbar()
           toolBar.sizeToFit()
   
           toolBar.isUserInteractionEnabled = true
           textfield.inputAccessoryView = toolBar
           textfield.delegate = self
   
   
   yearpickerToolbar = UIToolbar()
           yearpickerToolbar?.autoresizingMask = .flexibleHeight
   
           //add buttons
           let cancelButton = UIBarButtonItem(barButtonSystemItem: .cancel, target: self, action:#selector(cancelBtnClicked(_:)))
           cancelButton.tintColor = UIColor.blue
           let flexSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
           
           let doneButton = UIBarButtonItem(title: "Done", style: .plain , target: self, action: #selector(self.doneBtnClicked(_ :) ))
           doneButton.tintColor = UIColor.blue
   
           doneButton.setTitleTextAttributes([NSAttributedString.Key.foregroundColor:
   UIColor.black], for: .normal)
           cancelButton.setTitleTextAttributes([NSAttributedString.Key.foregroundColor:
   UIColor.black], for: .normal)
           
           yearpickerToolbar?.items = [cancelButton, flexSpace, doneButton]
           textfield.inputAccessoryView = yearpickerToolbar }
   
   @objc func cancelBtnClicked(_ button: UIBarButtonItem?) {
           self.view.endEditing(true)
           
       }
   
       @objc func doneBtnClicked(_ button: UIBarButtonItem?) {
           self.view.endEditing(true)
       }
Related