아이폰 UI웹뷰:숫자 키보드를 강제하는 방법은 무엇입니까?가능합니까?

StackOverflow https://stackoverflow.com/questions/773843

문제

일부 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 부분을 변경해야합니다.

  1. 대시 코드에서 Code Window의 index.html에서
  2. 작업중인 뷰의 캔버스에서 최적화 된 키보드를 사용하도록 설정하려는 입력 필드를 선택하십시오.
  3. Index.html을 클릭하여 초점을 맞추십시오.
  4. 대시 코드 메뉴 표시 줄에서 편집> 찾기를 선택하십시오.
  5. 텍스트 필드 컨트롤에 준 정확한 이름을 찾은 상자에 입력하십시오. 찾기는 index.html 파일에서 컨트롤을 찾습니다.
  6. 유형을 변경하십시오 type="text" 에게 type="number".

완료.

iOS PhoneGap 기반 앱에 사용할 수있는 것은 다음과 같습니다.

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

아래 이미지에 나와 있습니다. iOS 8.2 및 PhoneGap 3.5 이상에서 아름답게 작동합니다.

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);
                }
            },
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top