tamaño - iPhone/iOS: presentación de teclado HTML 5 para códigos postales
teclado iphone 7 (7)
¿Por qué no verifica el encabezado de la solicitud HTTP (agente de usuario) y sirve el diseño numérico a los dispositivos iOS, mientras se sirve el diseño alfanumérico para el resto?
Existen varios trucos para mostrar diferentes teclados en dispositivos móviles para entradas HTML 5 (es decir, etiquetas <input> ).
Por ejemplo, algunos están documentados en el sitio web de Apple, Configuración del teclado para vistas web .
Estos son excelentes para la usabilidad, pero cuando se trata de una entrada para códigos postales internacionales (en su mayoría numéricos, pero con letras permitidas), nos quedan algunas opciones pobres. La mayoría de las personas recomiendan usar el truco pattern="/d*" para mostrar el teclado numérico, pero eso no permite la entrada de letras.
El type="number" entrada type="number" muestra el teclado normal pero se desplaza al diseño numérico:
Esto funciona bien para dispositivos iOS, pero hace que Chrome piense que la entrada debe ser un número e incluso cambia el comportamiento de la entrada (aumento / disminución aumentan y disminuyen el valor).
¿Hay alguna forma de que iOS salga de forma predeterminada al diseño numérico, pero aún así permite la entrada alfanumérica?
Básicamente, quiero el comportamiento de iOS para type="number" pero quiero que el campo se comporte como un campo de texto normal en los navegadores de escritorio. es posible?
ACTUALIZAR:
Detectar el user-agent para iOS y usar el type="number" entrada type type="number" no es una opción. type="number" no es para valores de cadena (como códigos postales), y tiene otros efectos secundarios (como eliminar ceros a la izquierda, delimitadores de comas, etc.) que lo hacen menos ideal para códigos postales.
Actualmente, los navegadores no tienen una forma adecuada de representar códigos numéricos, como los códigos postales y los números de tarjetas de crédito. La mejor solución es usar type=''tel'' que le dará un teclado numérico y la capacidad de agregar cualquier carácter en el escritorio.
Escriba text y pattern=''/d'' le dará un teclado numérico pero solo en iOS.
Existe una propuesta HTML5.1 para un atributo llamado inputmode que le permite especificar el teclado independientemente del tipo. Sin embargo, actualmente no es compatible con ningún navegador.
También recomendaría echar un vistazo a la biblioteca de polyfill de Webshim , que tiene un método de Webshim para este tipo de entradas.
Esto hará que el lado numérico de la pantalla del teclado ios por defecto y mantenga la capacidad de cambiar al lado alfabético. Cuando el tipo de entrada html cambia, el dispositivo cambia el teclado para que coincida con el tipo apropiado.
(function ($) {
var control = $(''#test2'');
var field = $(''#test1'');
control.bind(''click'', function () {
if (control.is('':checked'')) {
field.attr(''type'', ''text'');
} else {
field.attr(''type'', ''number'');
}
})
}(jQuery));
<input type="number" id="test1" value="123" />
<input id="test2" type="checkbox" />Change
demostración alternativa: http://jsfiddle.net/davidcondrey/dbg1L0c0/3/embedded/result/
Si desea el teclado de gran formato numérico (el estilo del teléfono) puede ajustar el código en consecuencia y todavía funciona:
(function ($) {
var control = $(''#test2'');
var field = $(''#test1'');
control.bind(''click'', function () {
if (control.is('':checked'')) {
field.attr(''type'', ''text'');
} else {
field.attr(''type'', ''tel'');
}
})
}(jQuery));
<input type="tel" id="test1" value="a" />
<input id="test2" type="checkbox" />Change
Prueba esto:
<input type="text" name="postalcode" class="js-postal">
<script src="https://code.jquery.com/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
if(''ontouchstart'' in window) { // ensure we are in touch device.
$(''input.js-postal'').on(''focus'', function() {
var $this = $(this);
// memorize current value because...
var val = $this.val();
// this may cause reset value.
$this.attr(''type'', ''number'');
setTimeout(function() {
// Asynchronously restore ''type'' and value
$this.attr(''type'', ''text'');
$this.val(val);
}, 0);
});
}
});
</script>
Sé que esta es una manera muy harapienta, pero aparentemente funciona.
Aunque no he probado en dispositivos Android.
Tenga en cuenta que esto puede causar fallas $this.attr(''type'', ''number'') cuando $this.attr(''type'', ''number'') ya que esto restablece el valor cuando la input tiene caracteres no numéricos.
Las ideas básicas son robadas de esta respuesta :)
Una actualización de esta pregunta en iOS 11. Puede obtener el teclado numérico simplemente agregando el atributo de pattern="[0-9]*" ( pattern="[0-9]*" ) a cualquier entrada con un tipo de número.
El siguiente funciona como se espera.
<input type="number" pattern="[0-9]*">
Esto también funciona
<input type="number" pattern="/d*">
@davidelrizzo publicó parte de la respuesta, pero los comentarios de @Miguel Guardo y @turibe dan una imagen más completa pero son fáciles de perder.
Una búsqueda rápida en Google encontró esta pregunta .
HTML
<input type="text">
Javascript
$(''input[type="text"]'').on(''touchstart'', function() {
$(this).attr(''type'', ''number'');
});
$(''input[type="text"]'').on(''keydown blur'', function() {
$(this).attr(''type'', ''text'');
});
El tipo de entrada se cambia antes de que se pueda validar el formulario, mostrando el teclado correcto sin estropear el valor. Si solo desea que se ejecute en iOS, probablemente tendrá que usar el agente de usuario.
esto funcionara?
HTML:
<input type="tel" pattern="[0-9]*" novalidate>
Esto debería proporcionarle un buen teclado numérico en los navegadores Android / iOS, deshabilitar la validación del formulario del navegador en los navegadores de escritorio, no mostrar ninguna flecha, permitir ceros al principio y permitir comas y letras en los navegadores de escritorio, así como también en el iPad.
Teléfonos Android / iOS:
Escritorio:
iPad:
