How to Show "Done" Button on iOS Number Pad Keyboard

How to show Done button on iOS number pad keyboard?

Another solution. Perfect if there are other non-number pad text fields on the screen.

inputAccessoryView

- (void)viewDidLoad
{
[super viewDidLoad];

UIToolbar* numberToolbar = [[UIToolbar alloc]initWithFrame:CGRectMake(0, 0, 320, 50)];
numberToolbar.barStyle = UIBarStyleBlackTranslucent;
numberToolbar.items = @[[[UIBarButtonItem alloc]initWithTitle:@"Cancel" style:UIBarButtonItemStyleBordered target:self action:@selector(cancelNumberPad)],
[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil],
[[UIBarButtonItem alloc]initWithTitle:@"Apply" style:UIBarButtonItemStyleDone target:self action:@selector(doneWithNumberPad)]];
[numberToolbar sizeToFit];
numberTextField.inputAccessoryView = numberToolbar;
}

-(void)cancelNumberPad{
[numberTextField resignFirstResponder];
numberTextField.text = @"";
}

-(void)doneWithNumberPad{
NSString *numberFromTheKeyboard = numberTextField.text;
[numberTextField resignFirstResponder];
}

How can I show done button on the decimal pad keyboard?

Firstly, create a new Swift File. Add this to the file :

import Foundation
import UIKit

extension UIViewController{
func toolBar() -> UIToolbar{
let toolBar = UIToolbar()
toolBar.barStyle = .default
toolBar.isTranslucent = true
toolBar.barTintColor = UIColor.init(red: 0/255, green: 25/255, blue: 61/255, alpha: 1) //Write what you want for color
let space = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
var buttonTitle = "Done" //Or "Tamam"
var cancelButtonTitle = "Cancel" //Or "İptal" for Turkish
let doneButton = UIBarButtonItem(title: buttonTitle, style: .done, target: self, action: #selector(onClickDoneButton))
let cancelButton = UIBarButtonItem(title: cancelButtonTitle, style: .plain, target: self, action: #selector(onClickCancelButton))
doneButton.tintColor = .white
cancelButton.tintColor = .white
toolBar.setItems([cancelButton, space, doneButton], animated: false)
toolBar.isUserInteractionEnabled = true
toolBar.sizeToFit()
return toolBar
}

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

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

And add this toolbar to your textfield :

yourTextField.inputAccessoryView = toolBar()

Hope it helps...

How to add Done button on numberpad keyboard for VPMOTPView in swift

First introduce this extension on UITextField to add Done button.

extension UITextField {

/// Adding a done button on the keyboard
func addDoneButtonOnKeyboard() {
let doneToolbar = UIToolbar(frame: CGRect(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(title: "Done", style: .done, target: self, action: #selector(self.doneButtonAction))

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

self.inputAccessoryView = doneToolbar
}

/// Done button callback
@objc func doneButtonAction() {
self.resignFirstResponder()
}
}

Now, call the addDoneButtonOnKeyboard method on all the UITextField instances used in the VPMOTPView as below,

override func viewDidLoad() {
super.viewDidLoad()
//self.navigationBarButton()
otpView.otpFieldsCount = 6
otpView.otpFieldDefaultBorderColor = UIColor.lightGray
otpView.otpFieldEnteredBorderColor = UIColor(named: "LightPrimaryColor") ?? UIColor.blue
otpView.otpFieldErrorBorderColor = UIColor.red
otpView.otpFieldBorderWidth = 1
otpView.delegate = self
otpView.shouldAllowIntermediateEditing = false
otpView.otpFieldSize = 25
otpView.otpFieldDisplayType = .underlinedBottom
otpView.otpFieldEntrySecureType=false
otpView.initializeUI()
emailIconLabel.text = "We have sent an sms with OTP \nto \(phone!)"

otpView.subviews.compactMap({ $0 as? VPMOTPTextField}).forEach { tv in
tv.addDoneButtonOnKeyboard()
}
self.getOTPService()
}

How to do number keypad with done button in Swift 2.0?

You can add done button above keyboard using toolbar

override func viewDidLoad() {
super.viewDidLoad()
let tooBar: UIToolbar = UIToolbar()
tooBar.barStyle = UIBarStyle.BlackTranslucent
tooBar.items=[
UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: self, action: nil),
UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.Done, target: self, action: "donePressed")]
tooBar.sizeToFit()
yourTextFeild.inputAccessoryView = tooBar
}

func donePressed () {
yourTextFeild.resignFirstResponder()
}

It will look like this

Sample Image

How to add a 'Done' button to numpad keyboard in iOS

This is a simple way of projecting a done button in iOS7 num-keypad. In the below delegate method of UITextField, add a notification for keyboard show.

-(void)textFieldDidBeginEditing:(UITextField *)textField {

[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(keyboardWillShow:)
name:UIKeyboardWillShowNotification
object:nil];
}

Now implement the method keyboardWillShow as below. Here we need to take extra care for iOS7.

- (void)keyboardWillShow:(NSNotification *)note {
// create custom button
UIButton *doneButton = [UIButton buttonWithType:UIButtonTypeCustom];
doneButton.frame = CGRectMake(0, 163, 106, 53);
doneButton.adjustsImageWhenHighlighted = NO;
[doneButton setImage:[UIImage imageNamed:@"doneButtonNormal.png"] forState:UIControlStateNormal];
[doneButton setImage:[UIImage imageNamed:@"doneButtonPressed.png"] forState:UIControlStateHighlighted];
[doneButton addTarget:self action:@selector(doneButton:) forControlEvents:UIControlEventTouchUpInside];

if (SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(@"7.0")) {
dispatch_async(dispatch_get_main_queue(), ^{
UIView *keyboardView = [[[[[UIApplication sharedApplication] windows] lastObject] subviews] firstObject];
[doneButton setFrame:CGRectMake(0, keyboardView.frame.size.height - 53, 106, 53)];
[keyboardView addSubview:doneButton];
[keyboardView bringSubviewToFront:doneButton];

[UIView animateWithDuration:[[note.userInfo objectForKey:UIKeyboardAnimationDurationUserInfoKey] floatValue]-.02
delay:.0
options:[[note.userInfo objectForKey:UIKeyboardAnimationCurveUserInfoKey] intValue]
animations:^{
self.view.frame = CGRectOffset(self.view.frame, 0, 0);
} completion:nil];
});
} else {
// locate keyboard view
dispatch_async(dispatch_get_main_queue(), ^{
UIWindow* tempWindow = [[[UIApplication sharedApplication] windows] objectAtIndex:1];
UIView* keyboard;
for(int i=0; i<[tempWindow.subviews count]; i++) {
keyboard = [tempWindow.subviews objectAtIndex:i];
// keyboard view found; add the custom button to it
if([[keyboard description] hasPrefix:@"UIKeyboard"] == YES)
[keyboard addSubview:doneButton];
}
});
}
}

Now add this macro to suitable header to detect the SYSTEM_VERSION

#define SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(v)  ([[[UIDevice currentDevice] systemVersion] compare:v options:NSNumericSearch] != NSOrderedAscending)

Done button in phone pad (Swift 4)

Replace

Selector(("doneButtonAction"))

with

#selector(ViewController.doneButtonAction)

And complete code will be:

let done: UIBarButtonItem = UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.done, target: self, action: #selector(ViewController.doneButtonAction))

And add @objc before your doneButtonAction method and final code will be:

@objc func doneButtonAction()
{
self.registerTF[5].resignFirstResponder()
}

For more info refer THIS.

How to add Done button to Numpad in iOS using Swift?

As far as I know, you can't add the Done button on the keyboard part; you'd have add a inputAccessoryView to the UITextField or UITextView (if that's what you're using).

Check the documentation for more info.

Edit: Check this question for an example on how to do that.

Edit 2: Similar example in Swift.

Edit 3: Code from edit 2, as link may expire.

override func viewDidLoad()
{
super.viewDidLoad()

//--- add UIToolBar on keyboard and Done button on UIToolBar ---//
self.addDoneButtonOnKeyboard()
}

//--- *** ---//

func addDoneButtonOnKeyboard()
{
var doneToolbar: UIToolbar = UIToolbar(frame: CGRectMake(0, 0, 320, 50))
doneToolbar.barStyle = UIBarStyle.BlackTranslucent

var flexSpace = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil)
var done: UIBarButtonItem = UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.Done, target: self, action: Selector("doneButtonAction"))

var items = NSMutableArray()
items.addObject(flexSpace)
items.addObject(done)

doneToolbar.items = items
doneToolbar.sizeToFit()

self.textView.inputAccessoryView = doneToolbar
self.textField.inputAccessoryView = doneToolbar

}

func doneButtonAction()
{
self.textViewDescription.resignFirstResponder()
}

Swift 4.2

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()

txtMobileNumber.inputAccessoryView = doneToolbar
}

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

Remove Done Button From Number Pad upon a New Keyboard Loading

Follow these steps

a. First make the doneButton an instance varible of your class, this will help you maintain the reference to the button

b. Add this code at the beginning of your keyboardWillShow:(NSNotification *)note method

if(!showDoneButton ){
if(doneButton){
[doneButton removeFromSuperview];
doneButton = nil;
}
return;
}

c. add notification for keyBoardWillHide

[[NSNotificationCenter defaultCenter] addObserver:self 
selector:@selector(keyboardWillHide:)
name:UIKeyboardWillHideNotification
object:nil];

d. in keyBoardWillHide method do the following

- (void)keyboardWillHide:(NSNotification *)note 
{
if(doneButton)
{
[doneButton removeFromSuperview];
doneButton = nil;
}
}

This should do the trick.



Related Topics



Leave a reply



Submit