아이폰 UI웹뷰:숫자 키보드를 강제하는 방법은 무엇입니까?가능합니까?
문제
일부 iPhone 앱을 개발하기 위해 PhoneGap을 실험하고 있습니다.PhoneGap은 기본적으로 UIWebView를 래핑합니다. 잘 작동합니다.문제는 내 앱에 숫자 입력만 받는 입력 필드가 여러 개 있다는 것입니다.기본 표준 키보드를 사용하는 대신 숫자 키패드를 강제로 사용하여 사용자가 모든 필드에서 숫자 키로 전환하도록 해야 합니다.이것이 가능한지 아는 사람이 있습니까?어떻게?
설명:Apple은 현재 이를 허용하는 API를 제공하지 않는 것으로 알고 있습니다.UIWebView에서 상속된 사용자 정의 클래스를 만드는 것이 도움이 될 수 있는지, 아니면 사용자 정의 키보드를 만드는 것이 몇 가지 가능성을 열어줄 수 있는지 궁금합니다.
2009년 11월 6일 업데이트 - 아래에 설명된 대로 Apple은 최근 Safari 기능을 업데이트하여 다시 한번 지원되도록 했습니다.따라서 이를 반영하도록 허용된 답변이 변경되었습니다.
<html>
<input type='tel'/>
<input type='number'/>
<input type='email'/>
<input />
</html>
해결책
모바일 사파리가 새로운 HTML5 입력 유형 속성을 지원하는 것처럼 보입니다. 이메일, 숫자, 검색, 텔, 그리고 URL. 이들은 표시된 키보드를 전환합니다. 보다 유형 속성.
예를 들어,이를 수행 할 수 있습니다.
<input type="number" />
입력 상자에 초점이 맞으면 숫자 키보드가 표시됩니다 (사용자가 전체 키보드가 있고 "123"버튼을 누르는 것처럼.
숫자 만 원한다면 다음을 지정할 수 있습니다.
<input type="tel" />
그런 다음 사용자는 전화 번호가 키패드에 전화 번호를 매기게됩니다.
나는 이것이 Mobile Safari와 함께 작동한다는 것을 알고 있습니다. Uiwebview와 함께 작동한다고 가정합니다.
다른 팁
더 나은 솔루션은 사용하는 것입니다 <input type="text" pattern="[0-9]*">
모바일 및 데스크탑 브라우저 모두에 대한 양식을 설계 할 때.
에서 애플의 문서 (uiwebview에 대한 메모) :
입력 요소의 키보드 유형을 지정할 수 없습니다. 웹보기에는 기본 키보드를 기반으로하는 사용자 정의 키보드가 표시되지만 폼 요소간에 탐색하기위한 추가 컨트롤이 포함되어 있습니다.
IPhone OS 3.0에서는 이 기능이 아직 없었습니다. Apple이 왜 이 편리한 기능을 제거했는지 잘 모르겠습니다. 지금 당장 이 기능을 사용하는 것이 정말 당황스럽습니다.
다음은 iOS (4.0 이상) 웹보기와 호환되는 모든 유형의 목록입니다.
http://conecode.com/news/2011/12/mobile-safari-uiwebview-input-types/
이것은 iPhone OS의 첫 번째 반복에서 가능했습니다. Safari는 이름에 'zip'또는 'phone'이있는 필드를 형성 할 수있는 숫자 키보드를 제공하지만 iPhone OS 2.0에서는 사라졌습니다.
PhoneGap에는 현재이를 무시할 API 기능이 없습니다. 그것은 그들이 작업하고있는 일일 수 있습니다. 확실히 멋진 기능 일 것입니다.
iOS 모바일 사파리도 다음을 지원합니다.
<input type="password" />
대시 코드 프로젝트의 HTML 부분을 변경해야합니다.
- 대시 코드에서 Code Window의 index.html에서
- 작업중인 뷰의 캔버스에서 최적화 된 키보드를 사용하도록 설정하려는 입력 필드를 선택하십시오.
- Index.html을 클릭하여 초점을 맞추십시오.
- 대시 코드 메뉴 표시 줄에서 편집> 찾기를 선택하십시오.
- 텍스트 필드 컨트롤에 준 정확한 이름을 찾은 상자에 입력하십시오. 찾기는 index.html 파일에서 컨트롤을 찾습니다.
- 유형을 변경하십시오
type="text"
에게type="number"
.
완료.
iOS에는 숫자 키보드가 있습니다 UIKeyboardTypeNumbersAndPunctuation
, 그러나 이것은 HTML에서 호출 할 수 없습니다 (https://developer.apple.com/library/ios/documentation/stringstextfonts/conceptual/textandwebiphoneos/keyboardmanagement/keyboardmanagement.html)
"전화"키보드에서 구두점이 없으므로 직접 만들어야합니다. iOS8 사용자 정의 키보드를 사용할 수 있습니다. 또는 구두점이 필요한 경우 버튼을 추가 할 수 있습니다 (iOS에서 Numpad 키보드에 '완료'버튼을 추가하는 방법) 입력 필드를 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);
}
},