tamaño - iPhone UIWebview: ¿Cómo forzar un teclado numérico? ¿Es posible?
teclado iphone 7 (10)
Aquí hay una lista de todos los tipos compatibles con las vistas web iOS (4.0 y superiores):
http://conecode.com/news/2011/12/mobile-safari-uiwebview-input-types/
Estoy experimentando con PhoneGap para desarrollar algunas aplicaciones de iPhone. PhoneGap básicamente envuelve un UIWebView, funciona bien. El problema es que mi aplicación tiene varios campos de entrada que solo toman entrada numérica. Realmente necesito forzar el teclado numérico en lugar de aceptar el teclado estándar predeterminado, que luego obliga al usuario a cambiar al numérico en cada campo. ¿Alguien sabe si esto es posible? ¿Cómo?
Aclaración: sé que Apple no proporciona ninguna API para permitir esto. Me pregunto si la creación de una clase personalizada heredada de UIWebView podría ayudar, o quizás crear un teclado personalizado abriría algunas posibilidades.
Actualización 6 de noviembre de 2009 - Como se indica a continuación, Apple ha actualizado recientemente la funcionalidad de Safari para que esto sea, una vez más, compatible. Entonces la respuesta aceptada fue cambiada para reflejar eso.
<html>
<input type=''tel''/>
<input type=''number''/>
<input type=''email''/>
<input />
</html>
Comprobado en el iPhone OS 3.0, esta funcionalidad todavía no estaba allí, no estoy seguro de por qué Apple acaba de eliminar esta práctica funcionalidad, realmente molesto de trabajar en esto ahora mismo :(
De la documentación de Apple (la nota sobre UIWebView):
No puede especificar el tipo de teclado en los elementos de entrada. La vista web muestra un teclado personalizado basado en el teclado predeterminado, pero incluye algunos controles adicionales para navegar entre los elementos del formulario.
Debe realizar el cambio en la parte HTML de su proyecto Dashcode:
- En Dashcode abra index.html en la ventana de código.
- En el lienzo de la vista en la que está trabajando, seleccione el campo de entrada que desea configurar para usar el teclado optimizado.
- Haga clic en index.html para darle enfoque.
- Seleccione editar> buscar en la barra de menú de Dashcode.
- Escriba en el cuadro de búsqueda el nombre exacto que le dio al control del campo de texto. Buscar ubicará el control en el archivo index.html.
- Cambia el tipo de
type="text"atype="number".
Hecho.
Encontré una solución mejor es usar <input type="text" pattern="[0-9]*"> al diseñar formularios para navegadores móviles y de escritorio.
Esto fue posible en la primera iteración del iPhone OS: Safari daría teclados numéricos para formar campos con ''zip'' o ''phone'' en sus nombres, pero desapareció en iPhone OS 2.0.
PhoneGap no tiene una función API para anular esto en este momento. Puede ser algo en lo que estén trabajando, definitivamente sería una característica ingeniosa.
Parece que Mobile Safari admite los nuevos atributos de tipo de entrada HTML5 de correo electrónico , número , búsqueda , teléfono y url . Estos cambiarán el teclado que se muestra. Ver el atributo de tipo .
Entonces, por ejemplo, podrías hacer esto:
<input type="number" />
Y cuando el cuadro de entrada tiene enfoque, se muestra el teclado numérico (como si el usuario tuviera el teclado completo y presionara el botón "123".
Si realmente solo quieres números, puedes especificar:
<input type="tel" />
Y luego el usuario obtendría el número de teléfono que marca el teclado.
Sé que esto funciona con Mobile Safari; solo asumo que funcionará con UIWebView.
iOS Mobile Safari también es compatible con:
<input type="password" />
iOs tiene un teclado numérico UIKeyboardTypeNumbersAndPunctuation , pero no se puede llamar desde HTML ( https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html )
dado que en el teclado "tel" falta la puntuación, debe crearla usted mismo. Dado que ios8 teclados personalizados están disponibles. O si solo necesita la puntuación, puede agregar un botón ( Cómo agregar un botón "Hecho" al teclado numérico en iOS ) al teclado numérico que aparece cuando especifica su campo de entrada con type="number" pattern="[0-9]*" .
Para hacerlo: el código objetivo-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(''.'');"]];
}
Luego debe agregar el método al que se puede acceder a toda la aplicación en su 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);
}
},