iPhone UIWebview: How to force a numeric keyboard? Is it possible?

Question

I'm experimenting with PhoneGap to develop some iPhone apps. PhoneGap basically wraps a UIWebView - it works well. The problem is the my app has several input fields that only take numeric input. I really need to force the numeric keypad instead of accepting the default standard keyboard, which then forces the user to switch to the numeric on every field. Does anyone know if this is possible? How?

Clarification: I know that Apple doesn't currently provide any API to allow this. I'm wondering if creating a custom class that inherited from UIWebView might help, or maybe creating a custom keyboard would open up some possibilities?

Update 6 Nov, 2009 - As noted below, Apple has recently updated safari functionality so that this is, once again, supported. So the accepted answer was changed to reflect that.

 <html>
<input type='tel'/>
<input type='number'/>
<input type='email'/>
<input />
</html>

I no longer have the original screenshots, and back when I posted this, stackoverflow didn't have built-in image hosting. They stayed online for 6.5 years - so not bad, I guess. — JJ Rohrer, May 24 '17 at 11:48
Yeah, sorry if it came out as a complain, not my intention. Thanks for replying, though! — walen, May 24 '17 at 13:09

score 74 · Answer 1 · answered Oct 01 '09 at 18:57

74

It looks like Mobile Safari supports the new HTML5 input type attributes of email, number, search, tel, and url. These will switch the keyboard that is displayed. See the type attribute.

So for example, you could do this:

<input type="number" />

And when the input box has focus, the number keyboard is shown (as if the user had the full keyboard and hit the "123" button.

If you really only want numbers, you could specify:

<input type="tel" />

And then the user would get the phone number dialing keypad.

I know this works with Mobile Safari -- I only assume it will work with UIWebView.

answered Oct 01 '09 at 18:57

Chris Huseman

951
7
15

1

thankyou chris...was trying to find a way to do this for ages! – paulthenerd Oct 05 '09 at 19:01
Sweet update. Its funny when things like this sneak back into the stack. – JJ Rohrer Nov 07 '09 at 02:34
This is also discussed on the apple dev forum: https://devforums.apple.com/thread/20425?tstart=0 – JJ Rohrer Nov 19 '09 at 16:38
2

Caveat: If you are dealing with currency fields, the "number" type won't allow dollar signs, etc. Also, for zip code, the "number" type will add commas (e.g., "21015" becomes "21,015"). I ended up using the "tel" type for both to get satisfactory results. – mpemburn Mar 14 '12 at 11:13
What if I want only numbers and ":"? – danielrvt-sgb Dec 17 '12 at 19:51
type="number" did not work for me but type="tel" does. – Rooster242 May 05 '14 at 18:39
Outdated solution! You should take a look at the answer by @jon__o for a much better way, without all these undesired secondary effects. – T. Christiansen Sep 03 '15 at 11:09

score 31 · Answer 2 · answered Apr 22 '13 at 23:42

31

I found a better solution is to use <input type="text" pattern="[0-9]*"> when designing forms for both mobile and desktop browsers.

answered Apr 22 '13 at 23:42

jon__o

1,509
13
14

2

Best solution so far, without all these undesired secondary effects of type="number"! – T. Christiansen Sep 03 '15 at 11:11
1

This example force to show numeric keyboard without any variants to go back to qwerty one. – Vlad Dekhanov Nov 20 '15 at 10:16
2

This should be the selected answer - because only this shows the numeric keyboard without any special signs that appear with `tel` – gvaish Nov 21 '16 at 03:36

score 4 · Answer 3 · answered Jun 21 '09 at 17:38

4

Checked on IPhone OS 3.0, this functionality was still not there, not sure why Apple just removed this handy functionality, really upset to work on this right now :(

answered Jun 21 '09 at 17:38

Leon Guan

135
2
7

score 4 · Answer 4 · answered Apr 21 '09 at 20:25

From Apple's documentation (the note about UIWebView):

You cannot specify the keyboard type in input elements. The web view displays a custom keyboard that is based on the default keyboard but includes some additional controls for navigating between form elements.

score 2 · Answer 5 · answered Apr 21 '09 at 18:29

2

This was possible in the first iteration of the iPhone OS - Safari would give numeric keyboards to form fields with 'zip' or 'phone' in their names - but it disappeared in iPhone OS 2.0.

PhoneGap doesn't have an API function to override this at the moment. It may be something they're working on, it'd definitely be a nifty feature.

answered Apr 21 '09 at 18:29

ceejayoz

176,543
40
303
368

1

Apparently possible, once again. – JJ Rohrer Nov 07 '09 at 02:44
1

Yeah, they've added it back in 3.1 it seems. Finally! What an odd thing to remove. – ceejayoz Nov 07 '09 at 03:22

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

What you can also use for iOS phonegap based app is :

input type="number" pattern="[0-9]*"

It is shown in the image below. Works beautifully with iOS 8.2 and phonegap 3.5 and above.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 27 '15 at 06:38

Som

122
1
1
12

score 1 · Answer 7 · edited Dec 10 '12 at 01:52

You need to make the change in the HTML portion of your Dashcode project:

In Dashcode open index.html in the code window.
On the canvas of the view you are working on, select the input field that you want to set to use the optimized keyboard.
Click on index.html to give it focus.
Select edit>find from the Dashcode menu bar.
Type into the find box the exact name you gave to the text field control. Find will locate the control in the index.html file.
Change the type from type="text" to type="number".

Done.

score 1 · Answer 8 · answered Jan 11 '12 at 07:53

1

iOS Mobile Safari also supports:

<input type="password" />

answered Jan 11 '12 at 07:53

kaleazy

5,922
2
47
51

1

Up to iOS 8, you could use attribute pattern = "\d*" to make the password numeric with numeric keyboard, but from iOS 8, the pattern attribute seems to be ignored with input type password. – Andreas Paulsson Jan 14 '15 at 09:14

score 0 · Answer 9 · edited May 23 '17 at 11:55

iOs has a numeric keyboard UIKeyboardTypeNumbersAndPunctuation, but this can't be called from HTML (https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html)

since on the "tel" keyboard the punctuation is missing you have to create this on your own. Since ios8 custom keyboards are available. Or if you just need the punctuation you can add a button (How to add a 'Done' button to numpad keyboard in iOS) to the numeric keyboard which pops up when you specify your input field with type="number" pattern="[0-9]*" .

To do so: the objective-c code.

-(void)keyboardWillHide:(NSNotification *)note
{
    [self.donekeyBoardBtn removeFromSuperview];
    [self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat: @"document.activeElement.blur()"]];
}

- (void)keyboardWillShow:(NSNotification *)note
{
    [UIView setAnimationsEnabled:NO];
    // create custom button
    //UIKeyboardTypeNumberPadin
    //type="number" pattern="[0-9]*"
    UIButton *extryB= [UIButton buttonWithType:UIButtonTypeRoundedRect];
    extryB.frame = CGRectMake(0, self.view.frame.size.height+150, 100, 50);
    extryB.backgroundColor = [UIColor colorWithRed:204.0f/255.0f
                                             green:210.0f/255.0f
                                              blue:217.0f/255.0f
                                             alpha:1.0f];
    extryB.adjustsImageWhenHighlighted = NO;
    extryB.titleLabel.font = [UIFont systemFontOfSize:14.0];
    [extryB setTitle:@"," forState:UIControlStateNormal];
    [extryB setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [extryB addTarget:self action:@selector(extryBpressed) forControlEvents:UIControlEventTouchUpInside];



self.donekeyBoardBtn = extryB;

// locate keyboard view
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:@"<UIInputSetContainerView"] == YES)
    {

        for(int i = 0 ; i < [keyboard.subviews count] ; i++)
        {
            UIView* hostkeyboard = [keyboard.subviews objectAtIndex:i];

            if([[hostkeyboard description] hasPrefix:@"<UIInputSetHost"] == YES)
            {
                UIButton* donebtn = (UIButton*)[hostkeyboard viewWithTag:67123];
                if (donebtn == nil){
                    //to avoid adding again and again as per my requirement (previous and next button on keyboard)

                    if([[self printKeyboardType] isEqualToString: @"UIKeyboardTypePhonePad"]){
                        [keyboard addSubview:extryB];
                    }

                }
            }
        }
    }
    //[keyboard addSubview:extryB];
}
[UIView setAnimationsEnabled:YES];
// animate
[UIView animateWithDuration:0.5 animations:^{
    extryB.frame = CGRectMake(0, self.view.frame.size.height-50, 100, 50);
}];
}

-(NSString*)printKeyboardType
{

NSString* strKeyboardType = @"";
switch (self.textDocumentProxy.keyboardType) {
    case UIKeyboardTypeAlphabet:
        strKeyboardType = @"UIKeyboardTypeAlphabet";
        break;
    case UIKeyboardTypeDecimalPad:
        strKeyboardType = @"UIKeyboardTypeAlphabet";
        break;
    case UIKeyboardTypeDefault:
        strKeyboardType = @"UIKeyboardTypeDefault";
        break;
    case UIKeyboardTypeEmailAddress:
        strKeyboardType = @"UIKeyboardTypeEmailAddress";
        break;
    case UIKeyboardTypeTwitter:
        strKeyboardType = @"UIKeyboardTypeTwitter";
        break;
    case UIKeyboardTypeNamePhonePad:
        strKeyboardType = @"UIKeyboardTypeNamePhonePad";
        break;
    case UIKeyboardTypeNumberPad:
        strKeyboardType = @"UIKeyboardTypeNumberPad";
        break;
    case UIKeyboardTypeNumbersAndPunctuation:
        strKeyboardType = @"UIKeyboardTypeNumbersAndPunctuation";
        break;
    case UIKeyboardTypePhonePad:
        strKeyboardType = @"UIKeyboardTypePhonePad";
        break;
    case UIKeyboardTypeURL:
        strKeyboardType = @"UIKeyboardTypeURL";
        break;
    case UIKeyboardTypeWebSearch:
        strKeyboardType = @"UIKeyboardTypeWebSearch";
        break;
    default:
        strKeyboardType = @"UNKNOWN";
        break;
}
NSLog(@"self.textDocumentProxy.keyboardType=%@", strKeyboardType);
return strKeyboardType;
}

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

- (void)extryBpressed{
    //simulates a "." press
    [self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat: @"simulateKeyPress('.');"]];
}

Then you should add the a method which can be accessed application wide in your JS code.

simulateKeyPress: function(k) {
        var press = jQuery.Event("keypress");

        press.which = k;
        // place the id of your most outer html tag here
        $("#body").trigger(press);
            // just needed because my active element has a child element where the value should be placed in
                var id = document.activeElement.id.indexOf("-");
                if(id != -1){
                    var currentTf = sap.ui.getCore().byId(document.activeElement.id.split("-")[0]);
                    //append the value and set it (my textfield has a method setValue())
                    var currentTfValue = currentTf.getValue();
                    currentTf.setValue(currentTfValue + k);
                }
            },

iPhone UIWebview: How to force a numeric keyboard? Is it possible?

9 Answers9

Linked