iPhone的UIWebview:如何强制数字键盘? 可能吗?

我正在尝试使用PhoneGap来开发一些iPhone应用程序。 PhoneGap基本上包装了一个UIWebView – 它运作良好。 问题是我的应用程序有几个input字段,只有数字input。 我真的需要强制数字键盘,而不是接受默认的标准键盘,然后强制用户切换到每个字段的数字。 有谁知道这是可能的吗? 怎么样?

澄清:我知道苹果目前不提供任何API来允许这个。 我想知道如果创build一个从UIWebViewinheritance的自定义类可能会帮助,或者也许创build一个自定义的键盘会打开一些可能性?

更新2009年11月6日 – 如下所述,苹果公司最近更新了Safari浏览器的function,以便再次得到支持。 所以接受的答案就改变了,以反映这一点。

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

上面现在按顺序显示如下:

  • 替代文字http://img.skitch.com/20091107-eu5sgymf9wp6ibdu72hqawthci.jpg
  • 替代文字http://img.skitch.com/20091107-m9y8cnuiwe7sh34dtm5u1mcrt2.jpg
  • 替代文字http://img.skitch.com/20091107-jqccu6wsgks8t3w4x3k22f4apr.jpg
  • 替代文字http://img.skitch.com/20091107-r3p2ejjwb861pwetp1tkq2ccjr.jpg

它看起来像移动Safari支持电子邮件数字search电话url的新的HTML5inputtypes的属性。 这些将切换显示的键盘。 请参阅type属性 。

例如,你可以这样做:

 <input type="number" /> 

当input框有焦点时,显示数字键盘(就好像用户有完整的键盘并点击“123”button)。

如果你真的只想要数字,你可以指定:

 <input type="tel" /> 

然后用户将得到电话号码拨号键盘。

我知道这适用于移动Safari – 我只假设它将与UIWebView一起工作。

我发现一个更好的解决scheme是在为移动和桌面浏览器devise表单时使用<input type="text" pattern="[0-9]*">

从苹果的文档 (有关UIWebView的说明):

您不能在input元素中指定键盘types。 Web视图显示基于默认键盘的自定义键盘,但包含一些用于在表单元素之间导航的附加控件。

检查iPhone OS 3.0,这个function仍然不存在,不知道为什么苹果只是删除了这个方便的function,真的很烦恼现在工作在这个:(

以下是与iOS(4.0或更高版本)网页浏览兼容的每种types的列表:

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

这在iPhone OS的第一次迭代中是可能的–Safari会给数字键盘形成其名称中带有“zip”或“phone”的字段 – 但是它在iPhone OS 2.0中消失了。

PhoneGap目前没有API函数来覆盖这个。 这可能是他们正在做的事情,肯定是一个漂亮的function。

iOS Mobile Safari还支持:

 <input type="password" /> 

您需要在Dashcode项目的HTML部分进行更改:

  1. 在代码窗口中打开Dashcode打开index.html。
  2. 在您正在处理的视图的canvas上,select要设置为使用优化键盘的input字段。
  3. 点击index.html给它重点。
  4. 从Dashcode菜单栏中select编辑>查找。
  5. 在查找框中input您给文本字段控件的确切名称。 Find将findindex.html文件中的控件。
  6. 将type从type="text"更改为type="number"

完成。

你也可以使用基于iOS phonegap的应用程序:

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

它显示在下面的图片中。 与iOS 8.2和3.5以上的电话使用精美。

iOs有一个数字键盘UIKeyboardTypeNumbersAndPunctuation ,但是这不能从HTML调用( https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html

因为在“电话”键盘上的标点符号丢失,你必须自己创build。 由于ios8自定义键盘可用。 或者如果你只是需要标点符号,你可以添加一个button( 如何添加一个'完成'button到numpad键盘在iOS )到数字键盘popup当您指定您的input字段type="number" pattern="[0-9]*"

要做到这一点:Objective-C的代码。

 -(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('.');"]]; } 

那么你应该添加一个可以在你的JS代码中访问应用程序的方法。

 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); } },