Adding A Done Button on the Number Pad

Hi,

I wanted to know if it was possible to add a done button to the number pad in Xcode. Currently, the number pad looks like this:

I want to make the keyboard disappear when the user taps “done”. Any suggestions? I found some posts on Stack Overflow, but they were confusing and I am looking for a simpler method.

Thanks in advance.

Hi,

This is what I have used in the past.

I checked and updated one of the methods, still seems to work.

Blessings,
—Mark


//Call it in viewDidLoad

addDoneButtonOnNumpad(textField: <name of text field>)

func addDoneButtonOnNumpad(textField: UITextField) {
        
        let keypadToolbar: UIToolbar = UIToolbar()
        
        // add a done button to the numberpad
        keypadToolbar.items=[
            UIBarButtonItem(title: "Done", style: UIBarButtonItem.Style.done, target: textField, action: #selector(UITextField.resignFirstResponder)),
            UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.flexibleSpace, target: self, action: nil)
        ]
        keypadToolbar.sizeToFit()
        // add a toolbar with a done button above the number pad
        textField.inputAccessoryView = keypadToolbar
    }//addDoneToKeyPad

1 Like

Thank you! It worked.

How do you call it in viewDidLoad?

This looks like the solution that I need, but I’m not sure how to implement this. Any help would be appreciated.

Thanks

@scotthu

Welcome to the community.

Are you creating an App using UIKit (Storyboard) or SwiftUI?

Hi @scotthu

Wekcine to the community!

As Chris asks, are you using UIKit?

I have been so burried in SwiftUI lately, sometimes I forgot how calls work in UIKit! lol

Blessings,
–Mark

@scotthu

If you are using SwiftUI then you add a toolbar modifier to the TextField.

See this article by Paul Hudson.
https://www.hackingwithswift.com/quick-start/swiftui/how-to-add-a-toolbar-to-the-keyboard

Thank much. I’m using Swift UI

I’ve tried a couple of the suggestions from the Paul Hudson site.

The following gives me an error stating that “Type ‘ToolbarItemPlacement’ has no member ‘keyboard’”

The other solution of using the focus state was stating that I couldn’t use focus state

                TextField("Fluids:", text: $administeredFluids)
                    .toolbar{
                        ToolbarItemGroup(placement: .keyboard) {
                                          Button("Done") {
                                              
                                          }
                    }
            
                }

Using the focus solution, I received this error: Cannot find ‘$isInputActive’ in scope

    NavigationView {
        TextField("Fluids already given (mL): ", text: $administeredFluids)
            .textFieldStyle(.roundedBorder)
            .focused($isInputActive)
            .toolbar {
                ToolbarItemGroup(placement: .keyboard) {
                    Spacer()

                    Button("Done") {
                        isInputActive = false
                    }
                }
            }
    }

In addition, under ContentView: View, I had placed the focus state

struct ContentView: View {

@FocusState var isInputActive: Bool

Using your code names it works for me.

struct ContentView: View {
    @State private var administeredFluids = ""
    @FocusState var isInputActive: Bool

    var body: some View {
        NavigationView {
            TextField("Fluids already given (mL): ", text: $administeredFluids)
                .textFieldStyle(.roundedBorder)
                .focused($isInputActive)
                .toolbar {
                    ToolbarItemGroup(placement: .keyboard) {
                        Spacer()

                        Button("Done") {
                            isInputActive = false
                        }
                    }
                }
        }
    }
}

By the way, you don’t need a NavigationView if you don’t want one. It’s just there as a Container.

It’s a good idea to get used to cleaning your project with Shift + Command + K when you make lots of code changes.

Could it be because I’m still on Xcode 12?

Yes, you should update to the latest.

4 posts were split to a new topic: Adding Done button to numberPad TextField SwiftUI