javascript - iOS5 muestra el teclado numérico de forma predeterminada sin usar type="number" o type="tel"

iphone html5

Question

Con el lanzamiento de iOS5, Apple ha agregado su propia validación a los campos de tipo de entrada = "número". Esto está causando algunos problemas; vea esta pregunta a continuación, que lo resume:

El tipo de entrada = ''nueva'' validación elimina el número de ceros y formatos principales en Safari para iPhone iOS5 y Safari para Mac más reciente

Aunque input type = "tel" funciona para mostrar un teclado numérico en el iphone, es el teclado del teléfono que no tiene puntos decimales.

¿Hay alguna manera de configurar el teclado numérico como predeterminado usando html / js? Esta no es una aplicación de iPhone. Como mínimo, necesito números y un punto decimal en el teclado.

Actualizar

Los campos de entrada numérica en Safari 5.1 / iOS 5 solo aceptan dígitos y decimales. El valor predeterminado para una de mis entradas es $ 500,000 . Esto hace que Safari muestre un campo de entrada en blanco porque $,% son caracteres no válidos.

Además, cuando ejecuto mi propia validación onblur , Safari borra el campo de entrada porque estoy agregando $ al valor.

Por lo tanto, la implementación de Safari 5.1 / iOS5 del tipo de entrada = "número" lo ha dejado inutilizable.

jsfiddle

Pruébelo aquí - http://jsfiddle.net/mjcookson/4ePeE/ El valor predeterminado de $ 500,000 no aparecerá en Safari 5.1, pero si elimina los símbolos $ y, lo hará. Frustrante.

Answer 1

Diseñando el campo para que contenga símbolos

Cuando se trata de incluir los símbolos dentro de este campo number , puede usar algunos pasos similares a los siguientes:

HTML:

<span id="number-container">
<input type="number" name="number" id="number-field" value="500" />
<span id="number-container-symbol">$</span>
</span>

CSS:

#number-container {
position: relative;
}
#number-container-symbol {
left: 5pt;
position: absolute;
top: 0px;
}
#number-field {
background-color: transparent;
padding-left: 10pt;
}

Trátelo como una prueba de concepto. Vea este jsfiddle para un ejemplo en vivo. Parece que en Chrome:

Definición de granularidad más pequeña

En función de la documentación sobre la entrada de número (Borrador del editor) , para definir la granularidad , debe agregar el atributo step="<some-floating-point-number>" a la etiqueta <input> :

<input type="number" name="number" value="500.01" step="0.01" />

y funcionará en muchos navegadores modernos. Vea este jsfiddle para las pruebas.

Conclusión

Debería poder diseñarlo para que contenga los símbolos que necesita. También hay una función que, según la documentación, permite la compatibilidad con números de punto flotante.

Solución alternativa: campo vacío frente a otra cosa

También puedes engañar a alguien para que crea que está viendo el contenido del campo de entrada , pero muéstrale algo más detrás del campo (esta es una extensión de mi solución original). Luego, si alguien toca el campo, puede propagar el valor adecuado, etc., y luego volver al estado anterior en desenfoque. Vea este código ( ejemplo en vivo en jsfiddle - color azul significa que está mirando algo que no está dentro del campo):

// store original value from INPUT tag in jQuery''s .data()
var input_field = jQuery(''#number-field'');
var display_span = jQuery(''#number-container-value'');
var base_val = parseFloat(input_field.val());
input_field.data(''storedVal'', base_val);
input_field.val('''');
display_span.html(base_val);
// react to field gaining and losing focus
jQuery(''#number-field'').on(''focus'', function(event){
var el = jQuery(this);
var display = jQuery(''#number-container-value'');
if (typeof el.data(''storedVal'') != ''undefined''){
el.val(el.data(''storedVal''));
};
display.html('''');
}).on(''blur'', function(event){
var el = jQuery(this);
var display = jQuery(''#number-container-value'');
var new_val = parseFloat(el.val());
el.data(''storedVal'', new_val);
display.html(new_val);
el.val('''');
});

(el código completo con estilo está en el jsfiddle mencionado). El código necesita acortamiento y limpieza, pero es una prueba de concepto . Pruébalo y comparte tus hallazgos, por favor.

Answer 2

Solución de trabajo: probado en iPhone 5, Android 2.3, 4

La solución de Tadeck (ganador de recompensa) de usar un <span> para contener los símbolos del campo de entrada y colocar un <span> formateado sobre la entrada de moneda es esencialmente lo que terminé haciendo.

Mi código final es diferente y más corto, así que lo publico aquí. Esta solución resuelve la emisión de validación de iOS5 de los símbolos $,% dentro de los campos de entrada y, por lo tanto, input type="number" se puede usar de manera predeterminada.

Campo de símbolo, por ej. "xx%" "xx años"

<input name="interest-rate" value="6.4" maxlength="4" min="1" max="20" />
<span class="symbol">%</span>

• Simplemente use un campo de entrada numérica y un lapso fuera de la entrada para mostrar el símbolo.

Campo de moneda, por ejemplo. "$ xxx, xxx"

<span id="formatted-currency">$500,000</span>
<input id="currency-field" type="number" name="loan-amount" value="500000" maxlength="8" min="15000" max="10000000" />

• Coloque el tramo encima de la entrada de moneda y configure la entrada para mostrar: ninguno
• Cuando un usuario hace clic / golpecitos en el tramo, oculta el tramo y muestra la entrada. Si posicionas el tramo perfectamente, la transición es perfecta.
• El tipo de entrada de número se ocupa de la validación.
• En desenfoque y enviar la entrada, configure el span html para que sea el valor de la entrada. Formatea el tramo. Ocultar la entrada y mostrar el lapso con el valor formateado.

$(''#formatted-currency'').click(function(){
$(this).hide();
$(''#currency-field'').show().focus();
});
$(''#currency-field'').blur(function(){
$(''#formatted-currency'').html(this.value);
$(''#formatted-currency'').formatCurrency({
roundToDecimalPlace : -2
});
$(this).hide();
$(''#formatted-currency'').show();
});
// on submit
$(''#formatted-currency'').html($(''#currency-field'').val());
$(''#formatted-currency'').formatCurrency({
roundToDecimalPlace : -2
});
$(''#currency-field'').hide();
$(''#formatted-currency'').show();

Answer 3

¿Por qué no poner $ fuera del campo de entrada (como una etiqueta)? ¿O el signo de porcentaje a la derecha del campo de entrada? Parece que eso solucionaría su problema y usted podría usar input type = "number" y simplemente funcionaría.

Answer 4

A continuación, aparece el teclado numérico para iPad con iOS5, permite escribir cualquier carácter y permite configurar cualquier valor:

<input type="text" pattern="/d*">

Sin embargo, es feo, frágil (probablemente se romperá en el futuro ...) y no funciona en el iPhone (iPhone muestra el teclado numérico que solo permite de 0 a 9). La solución solo parece funcionar usando el patrón /d* o su equivalente [0-9]* .

Tal vez sea mejor usar type="tel" que parece actuar de la misma manera.

Answer 5

Estás atrapado entre una roca y un lugar duro. Hasta que haya un lugar en las especificaciones de HTML para type="currency" (y eso probablemente nunca ocurra debido a las diferentes maneras en que diferentes países escriben moneda), vas a tener que usar algo de magia JS para solucionar el problema.

Por supuesto, número o teléfono no será la mejor idea, sin embargo, usando un poco de astucia JS he encontrado esta solución:

var i = document.getElementById( ''input'' );
i.onblur = function()
{
i.type = ''text'';
i.value = number_format( i.value );
}
i.onfocus = function()
{
var v = Number( i.value.replace( //D/, '''' ) );
i.type = ''number'';
i.value = v > 0 ? v : '''';
}

Simplemente cambio el tipo de entrada dependiendo del enfoque / desenfoque, esto significa que una vez que el usuario ha salido del campo de texto, podemos formatear su culo. Cuando el usuario regresa, tomamos el valor, si hay uno que es> 0 y lo incluimos como un número. Aquí está la prueba de trabajo, espero que ayude: http://jsfiddle.net/ahmednuaman/uzYQA/

Answer 6

Esta solución funciona en iPad y iPhone, e incluso en el trabajo Siguiente / Anterior. Pruebe http://fiddle.jshell.net/L77Cq/2/show/ (o http://jsfiddle.net/L77Cq/ para editar).

<!DOCTYPE html>
<head>
<style>
.riggedinput::-webkit-input-placeholder {
margin: 0em;
font: -webkit-small-control;
color: initial;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
}
</style>
<script>
function focused() {
var test = document.getElementById(''test'');
setTimeout(function() { // timeout needed so that keyboard changes to numeric when using Next/Previous keyboard navigation buttons
if (document.activeElement === test) {
test.type = ''text'';
test.value = test.placeholder;
test.placeholder = '''';
}
}, 1);
}
function blurred() {
var test = document.getElementById(''test'');
var value = test.value;
test.placeholder = value;
test.value = '''';
test.type = ''number'';
}
if (!/^(iPhone|iPad|iPod)$/.test(navigator.platform)) alert (''Code specific to Mobile Safari'');
</script>
</head>
<body>
<input>
<input id="test" type="number" class="riggedinput" placeholder="$100.10USD" onfocus="focused()" onblur="blurred()">
<input>
</body>

Todavía tiene los siguientes problemas: * Si usa formularios, necesita copiar el valor a un campo oculto. * Por algún motivo, la página se desplaza de forma graciosa (la barra de direcciones del iPhone se esconde, oculta la consola de depuración de iPad).

PD: Encontré esta técnica independientemente del comentario anterior de Ahmed Nuaman (lo había intentado en el pasado, y noté su comentario hace un momento - ¡arrrgh!).

Answer 7

Existe potencialmente otra forma de evitar el problema para el iPhone:

<input id="test" TYPE="text" value="5.50" ontouchstart="this.type=''number''" onfocus="this.type=''text''" />

Esto cambia el tipo a número antes de que la entrada se enfoque cuando se toca (para que se muestre el teclado numérico) y luego cambia el tipo a texto para que se pueda editar el valor correcto.

Conseguir que funcione de manera confiable puede ser difícil, por ejemplo, actualmente toque la entrada pero luego deslice el control de los dedos para dejarlo como tipo = número, y no puedo pensar en una forma de detectar el botón Siguiente en el teclado, entre otros problemas.

Answer 8

Solo uso algo como <input type="number" name="job_order_id" maxlength="7" size="10px" value="" /> y obtengo el teclado con números y no el teclado del teléfono. También podría poner los valores iniciales en valor, y ya estarían allí.

Answer 9

Su problema se resolvería si Safari admite el atributo HTML5 ''inputmode'' para los elementos de entrada. Nadie sabe si, o cuando eso va a suceder. Mientras tanto, este enlace proporciona una lectura interesante.

Answer 10

Terminamos usando una solución hacky para permitir que los números y el teclado de activación se muestren cuando están enfocados, lo que funciona en un iPhone: registramos las pulsaciones de teclas y simulamos el valor.

https://output.jsbin.com/necuzoj/quiet

Intentamos cambiar el tipo de entrada de type = number a type = text on focus, pero no era confiable: (1) el teclado numérico no se mostró el 100% del tiempo, y (2) si el formulario era más largo que el pantalla y luego el desplazamiento automático para mostrar que la entrada enfocada estaba completamente tapada (a veces la entrada enfocada estaría fuera de la pantalla o debajo del teclado virtual).

Mostrar el teclado numérico (por ejemplo, type=tel ) no permitió la entrada de un punto decimal o dos puntos.

En un iPad, puede usar <input type=text pattern=[0-9]*> para mostrar los números y el teclado de activación, pero esa solución no funciona para un iPhone (un iPhone muestra el teclado numérico sin punto decimal).

Answer 11

Tuve un problema similar, y se me ocurrió esta solución js fea, forzando al iPad a abrir el teclado numérico.

Mi problema fue que Safari eliminó todo, excepto los dígitos, cuando se publicó el formulario, y necesito varios caracteres adicionales, por ejemplo, "3/7" o "65 $".

var elem = document.getElementById(''MathAnswer'');
elem.type = ''number'';
elem.onfocus = function() {
setTimeout(function() {
elem.type = ''text'';
}, 1);
};

Simplemente restablece el tipo de entrada a ''texto'' después de que el iPad muestra el teclado numérico, y voila, safari ya no elimina ningún dígito.

Espero que ayude a alguien!