iPhone UIWebView: Cómo forzar un teclado numérico? ¿Es posible?

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

Pregunta

estoy experimentando con PhoneGap para desarrollar algunas aplicaciones para el iPhone. PhoneGap básicamente se ajusta un UIWebView - que funciona bien. El problema es el mi aplicación tiene varios campos de entrada que sólo tienen una entrada numérica. Es realmente necesario para forzar el teclado numérico en lugar de aceptar el teclado estándar por defecto, que a su vez obliga al usuario a cambiar a la numérica en todos los campos. ¿Alguien sabe si esto es posible? ¿Cómo?

Aclaración: Sé que Apple no proporciona actualmente ninguna API para permitir esto. Me pregunto si la creación de una clase personalizada que heredó de UIWebView podría ayudar, o tal vez crear un teclado personalizado abriría algunas posibilidades?

Actualización 6 nov-2009 - Como se señala más adelante, Apple ha actualizado recientemente la funcionalidad de Safari para que este está, una vez más, el apoyo. Así que la respuesta aceptada fue cambiado para reflejar eso. 

 <html>
<input type='tel'/>
<input type='number'/>
<input type='email'/>
<input />
</html>
¿Fue útil?

Solución

Parece que Safari Mobile es compatible con los atributos nuevo tipo de entrada HTML5 de correo electrónico , número , Búsqueda , tel y URL . Estos cambiarán el teclado que se muestra. Ver el tipo de atributo .

Así, por ejemplo, usted podría hacer esto: 

<input type="number" />

Y cuando la caja de entrada tiene el foco, se muestra el teclado numérico (como si el usuario tenía el teclado completo y pulsa el botón "123".

Si realmente sólo desea que los números, se podría especificar: 

<input type="tel" />

Y a continuación, el usuario obtendría el teclado el número de teléfono de marcación.

Sé que esto funciona con Safari Mobile -. Sólo supongo que trabajará con UIWebView

Otros consejos

He encontrado una solución mejor es utilizar <input type="text" pattern="[0-9]*"> en el diseño de formas, tanto para los navegadores móviles y de escritorio.

Desde documentación de Apple (la nota sobre UIWebView):

  

No se puede especificar el tipo de teclado en los elementos de entrada. La vista web muestra un teclado personalizado que se basa en el teclado por defecto, pero incluye algunos controles adicionales para navegar entre elementos de formulario.

A cuadros en el iPhone OS 3.0, esta funcionalidad no era todavía no existe, seguro de por qué Apple acaba de quitar esta funcionalidad muy útil, muy molesta para trabajar en este momento: (

A continuación se muestra una lista de todos los tipos compatibles con iOS (4.0 y superior) vistas web:

http://conecode.com/news/2011 / 12 / móvil-Safari-UIWebView-input-tipos /

Esto fue posible en la primera iteración del iPhone OS - Safari daría a los teclados numéricos para formar campos con 'zip' o 'teléfono' en sus nombres - pero desapareció en el iPhone OS 2.0

.

PhoneGap no tiene una función de API para anular esta en este momento. Puede ser algo que están trabajando, que sin duda sería una buena característica.

IOS Safari Mobile también es compatible con: 

<input type="password" />

Es necesario hacer el cambio en la parte HTML de su proyecto de Dashcode:

  1. En Dashcode index.html abierta en la ventana de código.
  2. En el lienzo de la opinión de que se está trabajando, seleccione el campo de entrada que desea configurar para utilizar el teclado optimizado.
  3. Haga clic en index.html a darle el foco.
  4. Seleccione Edición> Buscar en la barra de menú de Dashcode.
  5. Escriba en el cuadro de encontrar el nombre exacto que asignó al control del campo de texto. Buscar localiza el control en el archivo index.html.
  6. Cambiar el tipo de type="text" a type="number".

Hecho.

Lo que también se puede utilizar para iOS PhoneGap aplicación basada es: 

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

Se muestra en la imagen de abajo. Funciona a la perfección con iOS 8.2 y PhoneGap 3.5 o superior.

iOs tiene un teclado numérico UIKeyboardTypeNumbersAndPunctuation, pero esto no puede ser llamado desde HTML ( https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html )

ya en el teclado "tel" la puntuacion no se encuentra usted tiene que crear por su cuenta. Desde ios8 teclados personalizados están disponibles. O si sólo tiene la puntuacion puede agregar un botón ( ¿Cómo añadir un botón 'Hecho' para teclado teclado numérico en iOS ) al teclado numérico, que aparece cuando se especifica el campo de entrada con type="number" pattern="[0-9]*".

Para hacerlo:. El código 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('.');"]];
}

A continuación, se debe añadir la de un método que se puede acceder a una amplia aplicación en el código 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);
                }
            },
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top