web-dev-qa-db-fra.com

iPhone UIWebview: Comment forcer un clavier numérique? C'est possible?

J'expérimente avec PhoneGap pour développer des applications pour iPhone. PhoneGap englobe essentiellement un UIWebView - cela fonctionne bien. Le problème est que mon application comporte plusieurs champs de saisie prenant uniquement une entrée numérique. J'ai vraiment besoin de forcer le clavier numérique au lieu d'accepter le clavier standard par défaut, ce qui oblige ensuite l'utilisateur à passer au numérique sur chaque champ. Est-ce que quelqu'un sait si c'est possible? Comment?

Précision: Je sais qu'Apple ne fournit actuellement aucune API pour permettre cela. Je me demande si la création d'une classe personnalisée héritée de UIWebView pourrait vous aider ou si la création d'un clavier personnalisé ouvrait des possibilités.

Mise à jour 6 nov. 2009 - Comme indiqué ci-dessous, Apple a récemment mis à jour la fonctionnalité Safari afin qu'elle soit à nouveau prise en charge. La réponse acceptée a donc été modifiée pour refléter cela.

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

Il semble que Mobile Safari prenne en charge les nouveaux attributs de type de saisie HTML5 email, numéro, search, tel et url. Ceux-ci changeront le clavier qui est affiché. Voir l'attribut type .

Ainsi, par exemple, vous pouvez faire ceci:

<input type="number" />

Et lorsque la zone de saisie est activée, le clavier numérique est affiché (comme si l'utilisateur possédait le clavier complet et appuyait sur le bouton "123".

Si vous ne voulez que des chiffres, vous pouvez spécifier:

<input type="tel" />

Et puis l'utilisateur obtiendrait le numéro de téléphone composant le clavier.

Je sais que cela fonctionne avec Mobile Safari - je suppose seulement que cela fonctionnera avec UIWebView.

72
Chris Huseman

J'ai trouvé une meilleure solution consiste à utiliser <input type="text" pattern="[0-9]*"> lors de la conception de formulaires pour les navigateurs mobiles et de bureau.

28
jon__o

De Documentation Apple (la note à propos de UIWebView):

Vous ne pouvez pas spécifier le type de clavier dans les éléments d'entrée. La vue Web affiche un clavier personnalisé basé sur le clavier par défaut, mais comprenant des commandes supplémentaires permettant de naviguer entre les éléments de formulaire.

4
ashcatch

Vérifié sur IPhone OS 3.0, cette fonctionnalité n’était toujours pas là, pas sûr de la raison pour laquelle Apple vient de supprimer cette fonctionnalité pratique, vraiment contrariée de pouvoir y travailler maintenant :(

4
Leon Guan

Voici une liste de tous les types compatibles avec les vues Web iOS (4.0 et versions supérieures):

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

3
Chris

Cela était possible lors de la première itération de l'iPhone OS - Safari donnait des claviers numériques pour former des champs avec des noms "Zip" ou "téléphone" dans leurs noms - mais cela a disparu dans iPhone OS 2.0.

PhoneGap ne dispose pas d'une fonction API pour le remplacer pour le moment. C'est peut-être quelque chose sur lequel ils travaillent, ce serait certainement une fonctionnalité intéressante.

2
ceejayoz

iOS Mobile Safari prend également en charge:

<input type="password" />
1
kaleazy

Vous devez modifier la partie HTML de votre projet Dashcode:

  1. Dans Dashcode, ouvrez index.html dans la fenêtre de code. 
  2. Sur le canevas de la vue sur laquelle vous travaillez, sélectionnez le champ de saisie que vous souhaitez définir pour utiliser le clavier optimisé. 
  3. Cliquez sur index.html pour le mettre en évidence.
  4. Sélectionnez Edition> Rechercher dans la barre de menus Dashcode.
  5. Tapez dans la zone de recherche le nom exact que vous avez donné au contrôle de champ de texte. Rechercher localisera le contrôle dans le fichier index.html.
  6. Changez le type de type="text" en type="number".

Terminé.

1
JAnton

Ce que vous pouvez également utiliser pour l'application iOS phonegap est: 

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

Il est montré dans l'image ci-dessous. Fonctionne à merveille avec iOS 8.2 et phonegap 3.5 et supérieur.

 

1
Som

iOs a un clavier numérique UIKeyboardTypeNumbersAndPunctuation, mais cela ne peut pas être appelé depuis HTML ( https://developer.Apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html )

comme il manque la ponctuation sur le clavier "tel", vous devez le créer vous-même. Depuis claviers personnalisés ios8 sont disponibles. Ou si vous avez simplement besoin de ponctuation, vous pouvez ajouter un bouton ( Comment ajouter un bouton "Terminé" au clavier du pavé numérique sous iOS ) au clavier numérique qui apparaît lorsque vous spécifiez votre champ de saisie avec type="number" pattern="[0-9]*".

Pour ce faire: le code objectif-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('.');"]];
}

Ensuite, vous devez ajouter la méthode qui peut être consultée dans l’ensemble de votre code 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