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部分进行更改:
- 在代码窗口中打开Dashcode打开index.html。
- 在您正在处理的视图的canvas上,select要设置为使用优化键盘的input字段。
- 点击index.html给它重点。
- 从Dashcode菜单栏中select编辑>查找。
- 在查找框中input您给文本字段控件的确切名称。 Find将findindex.html文件中的控件。
- 将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); } },