How to make application keyboard same as safari keyboard in iPhone?

Question

My client asked me to make numeric keypad looks as it is visible in safari. In safari the keypad is visible with three more buttons at the top that are prev next and done. I want to achieve the same. Please tell me the way to achieve this.

Thanks in advance

Answer 1

That's quite easy, all you need is a UIToolBar on top of your keyboard!

UIToolBar Apple Doc

And, how to do it:

UIToolbar *myToolBar = [[UIToolbar alloc] init];
myToolBar.barStyle = UIBarStyleDefault;
[myToolBar sizeToFit];


UIBarButtonItem *leftBarButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(buttonClicked:)];
NSArray *array = [NSArray arrayWithObject:leftBarButton];
[leftBarButton release];
[myToolBar setItems:array];

myTextField.inputAccessoryView = myToolBar;
[myToolBar release];

Answer 2

There is a keyboardType property for a UITextField:

typedef enum {
    UIKeyboardTypeDefault,                // Default type for the current input method.
    UIKeyboardTypeASCIICapable,           // Displays a keyboard which can enter ASCII     characters, non-ASCII keyboards remain active
    UIKeyboardTypeNumbersAndPunctuation,  // Numbers and assorted punctuation.
    UIKeyboardTypeURL,                    // A type optimized for URL entry (shows . /     .com prominently).
    UIKeyboardTypeNumberPad,              // A number pad (0-9). Suitable for PIN entry.
    UIKeyboardTypePhonePad,               // A phone pad (1-9, *, 0, #, with letters under the numbers).
    UIKeyboardTypeNamePhonePad,           // A type optimized for entering a person's name or phone number.
    UIKeyboardTypeEmailAddress,           // A type optimized for multiple email address entry (shows space @ . prominently).

    UIKeyboardTypeAlphabet = UIKeyboardTypeASCIICapable, // Deprecated

} UIKeyboardType;

Your code should read

if(user is prompted for numeric input only)
    [textField setKeyboardType:UIKeyboardTypeNumberPad];

if(user is prompted for alphanumeric input)
    [textField setKeyboardType:UIKeyboardTypeDefault];

http://developer.apple.com/library/ios/#documentation/uikit/reference/UIToolbar_Class/Reference/Reference.html

This might help..!!!

Answer 3

UITextField has a property (keyboardType) that can be useful to set the keyboard you need.

aTextField.keyboardType = UIKeyboardTypeDefault;

keyboardType can be one of the following:

UIKeyboardTypeDefault              
UIKeyboardTypeASCIICapable         
UIKeyboardTypeNumbersAndPunctuation
UIKeyboardTypeURL                   
UIKeyboardTypeNumberPad            
UIKeyboardTypePhonePad               
UIKeyboardTypeNamePhonePad          
UIKeyboardTypeEmailAddress

You can find screenshot at this address: http://gprince.yolasite.com/index/uikeyboardtype

Anyway, you won't get the top bar with 3 buttons if you don't show your keyboard in UIWebView. A workaround is to add a UIView, containing the bar you want, on top of your keyboard, but your app could be rejected. There are many discussion on the internet about this issue.

My personal solution is to add a UIView to the NIB view and show it at the same time my keyboard shows up, without adding it to the keyboard directly.