web-dev-qa-db-ja.com

iPhone UIWebview：数字キーボードを強制する方法は？出来ますか？

PhoneGapを試して、いくつかのiPhoneアプリを開発しています。 PhoneGapは基本的にUIWebViewをラップします-それはうまく機能します。問題は、アプリに数値入力のみを受け付ける入力フィールドがいくつかあることです。デフォルトの標準キーボードを受け入れる代わりに、数値キーパッドを強制する必要があります。これにより、ユーザーはすべてのフィールドで数値に切り替える必要があります。これが可能かどうか誰にもわかりますか？どうやって？

明確化：Appleは現在、これを許可するAPIを提供していません。UIWebViewから継承したカスタムクラスを作成すると役立つか、カスタムキーボードを作成すると開きますかいくつかの可能性を上げますか？

2009年11月6日更新-以下に示すように、Appleは最近、これがサポートされるようにsafari機能を更新しました。そのため、受け入れられた回答は変更されました。

 <html>
<input type='tel'/>
<input type='number'/>
<input type='email'/>
<input />
</html>
iphonekeyboarduiwebviewcordova
61
JJ Rohrer

Mobile Safariは、email、number、search、tel、およびurl。これらは表示されるキーボードを切り替えます。 type属性 を参照してください。

したがって、たとえば、これを行うことができます：

<input type="number" />

そして、入力ボックスにフォーカスがあるとき、数字キーボードが表示されます（まるでユーザーがフルキーボードを持っていて「123」ボタンを押したかのように）。

本当に数字だけが必要な場合は、次を指定できます。

<input type="tel" />

そして、ユーザーは電話番号をダイヤルするキーパッドを取得します。

これはMobile Safariで機能することを知っています-UIWebViewでのみ機能すると想定しています。

72
Chris Huseman

より良い解決策は、<input type="text" pattern="[0-9]*">モバイルブラウザーとデスクトップブラウザーの両方のフォームを設計する場合。

28
jon__o

Appleのドキュメント （UIWebViewに関するメモ）から：

入力要素にキーボードタイプを指定することはできません。 Webビューには、デフォルトのキーボードに基づいたカスタムキーボードが表示されますが、フォーム要素間を移動するための追加のコントロールが含まれています。

4
ashcatch

IPhone OS 3.0で確認したところ、この機能はまだありませんでしたが、なぜAppleはこの便利な機能を削除しただけで、本当に今すぐこの機能に動揺しています:(

4
Leon Guan

IOS（4.0以降）Webビューと互換性のあるすべてのタイプのリストは次のとおりです。

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

3
Chris

これはiPhone OSの最初のイテレーションで可能でした-Safariは名前に「Zip」または「phone」を含むフィールドを形成するために数字キーボードを提供しますが、iPhone OS 2.0では姿を消しました。

PhoneGapには、現時点でこれをオーバーライドするAPI関数がありません。それは彼らが取り組んでいる何かかもしれません、それは間違いなく気の利いた機能になるでしょう。

2
ceejayoz

iOS Mobile Safariは以下もサポートしています。

<input type="password" />
1
kaleazy

DashcodeプロジェクトのHTML部分に変更を加える必要があります。

  1. Dashcodeのコードウィンドウでindex.htmlを開きます。
  2. 作業しているビューのキャンバスで、最適化されたキーボードを使用するように設定する入力フィールドを選択します。
  3. Index.htmlをクリックして、フォーカスを与えます。
  4. Dashcodeメニューバーから[編集]> [検索]を選択します。
  5. テキストボックスコントロールに付けた正確な名前を検索ボックスに入力します。 Findは、index.htmlファイルでコントロールを見つけます。
  6. タイプをtype="text"からtype="number"に変更します。

できた.

1
JAnton

IOSのphonegapベースのアプリにも使用できるものは次のとおりです。

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

以下の画像に示されています。 iOS 8.2およびphonegap 3.5以上で美しく動作します。

1
Som

iOsには数字キーボードUIKeyboardTypeNumbersAndPunctuationがありますが、これをHTMLから呼び出すことはできません（ https://developer.Apple.com/library/ios/documentation/StringsTextFonts/Conceptual /TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html ）

「tel」キーボードでは句読点が欠落しているため、これを自分で作成する必要があります。 ios8カスタムキーボードが利用できるため。または、句読点のみが必要な場合は、数字キーボードにボタン（ iOSのテンキーキーボードに「完了」ボタンを追加する方法 ）を追加できます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);
                }
            },
0
Dominik Feininger