Best IT Recipes

IPhone UIWebview: how to get a numeric keypad? Is it possible?

I am experimenting with PhoneGap to develop some iPhone apps. PhoneGap basically wraps UIWebView - it works well. The problem is that my application has several input fields that accept only numerical input. I really need to force the numeric keypad instead of accepting the default standard keyboard, and then force the user to switch to a numeric value in each field. Does anyone know if this is possible? How?

Explanation: I know that Apple does not currently provide an API for this. I am wondering if a custom class inherited from UIWebView could be created, or maybe creating a custom keyboard would open up some possibilities?

Update November 6, 2009 - As mentioned below, Apple recently updated Safari functionality, so this is again supported. Therefore, the accepted answer has been modified to reflect this.

<html> <input type='tel'/> <input type='number'/> <input type='email'/> <input /> </html>
+60
iphone cordova keyboard uiwebview
Apr 21 '09 at 18:06
source share
10 answers

It appears that Mobile Safari supports new attributes such as HTML5 input by email, number, search, tel, and url. They will switch the displayed keyboard. See the type attribute .

So, for example, you can do this:

 <input type="number" />

And when the input field has focus, the numeric keypad is displayed (as if the user had a full keyboard and press the "123" button.

If you really need numbers, you can specify:

 <input type="tel" />

And then the user will receive a phone dial keypad.

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

+70
Oct 01 '09 at 18:57
source share

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

+28
Apr 22 '13 at 23:42 on
source share

From Apple Documentation (note about UIWebView):

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

+4
Apr 21 '09 at 20:25
source share

Tested on IPhone OS 3.0, this functionality still does not exist, not knowing why Apple just uninstalled this convenient functionality, really upset to work on it right now :(

+4
Jun 21 '09 at 17:38
source share

The following is a list of all types compatible with iOS (4.0 and above):

http://conecode.com/news/2011/12/mobile-safari-uiwebview-input-types/

+3
Dec 27 '11 at 19:20
source share

This was possible in the first iteration of iPhone OS — Safari would provide numeric keypads to create fields with “zip” or “phone” in their names, but this disappeared in iPhone OS 2.0.

PhoneGap does not have an API function to override this at the moment. Perhaps this is what they are working on, it is definitely a great feature.

+2
Apr 21 '09 at 18:29
source share

You need to make changes to the HTML part 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 configure to use the optimized keyboard.
  • Click on index.html to make it the focus.
  • Choose edit> find from the Dashcode menu bar.
  • Enter the exact name that you specified to manage the text box in the search field. A search will find the control in the index.html file.
  • Change the type from type="text" to type="number" .

Done.

+1
Oct 13 2018-10-10T00:
source share

iOS Mobile Safari also supports:

 <input type="password" />
+1
Jan 11 2018-12-12T00:
source share

What you can also use for an iOS phonegap-based application:

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

This is shown in the image below. Works great with iOS 8.2 and 3.5 and up.

+1
Jul 27 '15 at 6:38
source share

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

since there is no punctuation on the tel keyboard, you need to create it yourself. Since custom ios8 keyboards are available. Or, if you just need punctuation, you can add a button ( How to add the Finish button to a numpad keyboard in iOS ) to the numeric keypad that appears when you specify an input field using type="number" pattern="[0-9]*" .

For this: 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 must add a method that can be accessed widely 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); } },
0
Jun 29. '15 at 15:11
source share


More articles:


All Articles