ios - plugin - plantillas contact form 7
<tipo de entrada="número"/> no muestra un teclado numérico en iOS (5)
Después de leer y probar muchas ideas, nada de lo que encontré funcionó para mostrar exactamente el teclado con solo dígitos y el punto o coma.
Terminé de usar solo <input type="number"> y un controlador onkeyup en esta entrada donde hago algo como esto:
var previousValue = localStorage.getItem(''myInputId'');
if (input.getAttribute(''type'') === "number" && input.validity && input.validity.badInput) {
input.value = previousValue || "";
}
localStorage.setItem(''myInputId'', input.value);
Esto evita que el usuario escriba caracteres incorrectos al reemplazar el valor con el anterior si hay un error de validez (no sé si se trata de un objeto o estándar de iOS)
cuidado, no probé este fragmento de código porque tengo cosas más complejas a mi lado, pero espero que sepas la idea
Con esta solución:
- En iOS: el usuario tiene un teclado clásico completo pero está abierto de forma predeterminada en los números y no puede escribir caracteres incorrectos.
- En Android, el teclado numérico es perfecto.
- En el futuro, podemos esperar que iOS active el buen teclado para los números y que nunca se llame la parte de javascript.
De acuerdo con la documentación de Apple, cuando configuro un elemento de entrada con un tipo de number , debería obtener un teclado numérico.
<input type="number"/>
number: un campo de texto para especificar un número. Muestra un teclado numérico en iOS 3.1 y versiones posteriores.
Parece casi imposible de desordenar. Sin embargo, cuando veo este sencillo violín en mi iPhone o en el simulador (ambos iOS6), el teclado numérico no aparece, y en su lugar obtengo el teclado alfabético estándar.
¿Qué demonios podría haber arruinado aquí?
En mi experiencia, esto es muy inconsistente en todos los navegadores. iOS ha ido de un lado a otro entre admitir esto correctamente para mi caso de uso. Por lo general, solo quiero que el teclado que se muestra por defecto sea el numérico. La última vez que lo verifiqué, usando el tipo de entrada = "número" aparece correctamente el teclado numérico, pero el atributo "tamaño" se ignora, lo que hace que el formato de mi móvil sea muy malo. Agregué un atributo a todas las entradas que preferiría que usara el teclado numérico de manera predeterminada, y utilicé jQuery para cambiar cualquier atributo (es decir, tipo = "número") cuando el navegador detecta que funciona correctamente. De esa manera no tengo que volver atrás y actualizar las entradas individuales y me permite aplicarlo solo en los navegadores compatibles.
Sería fantástico si los O / S principales tuvieran un atributo para "teclado predeterminado" aparte del tipo de entrada. ¿Qué sucede si un usuario ingresa una dirección o código postal? Por lo general, aquellos comienzan con números, por lo que es útil mostrar el teclado numérico de manera predeterminada, pero permitir CUALQUIER texto.
En cuanto a la validación, no puedo confiar en el navegador para admitir la validación para los tipos de entrada específicos, por lo que utilizo javascript y la validación del lado del servidor.
Necesitas especificar el patrón:
<input type="number" pattern="/d*"/>
Como un number podría ser negativo o con punto flotante, así que - y . y , debería estar disponible en el teclado, a menos que especifique un patrón de solo dígitos.
No estoy seguro de si esto es lo que desea, pero el tipo de entrada = "tel" le dará el "teclado numérico del teléfono".
Saludos. Sé que esta pregunta es antigua pero sentí que es una solución muy buscada y decidí publicar una respuesta.
Aquí hay una solución que he creado para abordar el teclado del iPad , así como prácticamente cualquier cosa.
Además, este enfoque no requiere que uses información de número de tipo, lo que, en mi humilde opinión, es muy feo.
A continuación, puede encontrar una versión de trabajo.
Pensamientos en las teclas del teclado de Apple iPad ...
Tuve que crear un controlador de eventos keyPress para capturar y suprimir claves en el iPad que no parecen ser manejadas por el evento keyDown o son ambiguas.
// Bind keydown event to all input type=text in form.
$("form input[type=text]").keydown(function (e) {
// Reference to keyCodes...
var key = e.which || e.keyCode;
// Reference to shiftKey...
var shift_key = e.shiftKey;
// Reference to ctrlKey...
var ctrl_key = e.ctrlKey;
// Reference to altKey...
var alt_key = e.altKey;
// When user presses the shiftKey...
if(e.shiftKey) {
//...supress its click and whatever key follows after it.
console.log(e.shiftKey + '' and '' + key + '' supressed.'');
// Deny
return false;
// ONLY Allow Numbers, Numberpad, Backspace & Tab
} else if ( (key >= 48 && key <=57) || (key >= 96 && key <=105) || (key >= 8 && key <=9) ) {
// Allow
return true;
} else {
// Deny every other key and/or shift + key combination NOT explicitly declared.
return false;
}
});
// KeyPresss to handle remaining iPAD keyboard keys!
// These keys don''t seem to be handled by the keyDown event or are ambiguous???!
// Bind keypress event to all input type=text in form.
$("form input[type=text]").keypress(function (e) {
// Reference to keyCodes...
var key = e.which || e.keyCode;
// Reference to shiftKey...
var shift_key = e.shiftKey;
// Reference to ctrlKey...
var ctrl_key = e.ctrlKey;
// Reference to altKey...
var alt_key = e.altKey;
switch (key) {
// Character -> ^
case 94:
return false;
// Character -> #
case 35:
return false;
// Character -> $
case 36:
return false;
// Character -> @
case 64:
return false;
// Character -> &
case 38:
return false;
// Character -> *
case 42:
return false;
// Character -> (
case 40:
return false;
// Character -> )
case 41:
return false;
// Character -> %
case 37:
return false;
// Character -> !
case 33:
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<label for="text1">Numbers, Numberpad, Backspace & Tab ONLY:</label>
<input id="text1" type="text" placeholder="0" min="0" input pattern="[0-9]*" inputmode="numeric" value="" maxlength="4">
</form>