solo - regular expressions html5
Número de tipo de entrada html5 con patrón regex en móvil (4)
Estoy intentando obtener un patrón de expresiones regulares en el number tipo de entrada para mostrar solo números y puntos. Probé algo como esto.
<input type="number" pattern="[0-9.]*">
<input type="tel">
Ambos muestran solo números (0-9), pero no se muestran. (punto). Necesito usar el punto en el campo de entrada.
¿Es posible a través de html5? ¿O debo ir con javascript?
Nota: Esto funciona bien en Android, pero. (punto) no se muestra en iphones
Necesito mostrar el teclado móvil como este ...
¿Alguna ayuda con respecto a esto?
Desafortunadamente, no es posible lograr la funcionalidad exacta que está buscando, no es posible. Sin embargo, hay un tipo de "pirateo" disponible que dará una funcionalidad similar:
http://www.brownphp.com/2011/05/iphone-currency-input-web-apps/
Es un poco de JS que llena el decimal automáticamente cuando el usuario comienza a escribir, de esta manera: 0.01 -> 0.12 -> 1.23 -> 12.34. Así que esto puede ser usado para un efecto similar.
No todos los tipos y atributos de entrada son compatibles con todos los navegadores. En general, la mayoría de los navegadores modernos de IE10 + incluyen conceptos básicos como el correo electrónico y el número.
El navegador volverá a una entrada de texto estándar cuando sea de un tipo específico e ignorará los atributos cuando esos valores no sean compatibles.
Así que debes usar un buen patrón de expresión regular.
por ejemplo
<input type="tel" name="tel" pattern="^(?:/(/d{3}/)|/d{3})[- . ]?/d{3}[- . ]?/d{4}$" />
- 1234567899
- 123 456 7899
- 123-456-7899
- 123.456.7899
soportado
Soporte de navegador para el tipo ''tel''
- Android (si)
- iOS (si)
- IE (sí)
- Móvil (sí)
- Opera (si)
- Móvil (sí)
- Opera (si)
- Clásico (si)
- Opera Mini (no)
- Firefox (si)
- Móvil (sí)
- Chrome para Android (si)
(Fuentes: caniuse.com, DeviceAtlas, mobilehtml5.org)
Soporte de navegador para atributo de patrón
Pero el atributo de patrón es compatible con Internet Explorer 10, Firefox, Opera y Chrome. Y no se admite en Internet Explorer 9 y versiones anteriores , ni en Safari .
Si solo especifica "tipo = número", se mostrará el teclado en el iPhone como:
Y si especifica un patrón como <input type="number" pattern="/d*"/> o <input type="number" pattern="[0-9]*" /> , entonces el teclado del iPhone será como :
Aún no puede mostrar el punto (.), Actualmente no hay ningún patrón para manejar ese caso.
Así que puede optar por <input type="tel" /> que proporcionará un teclado como:
Consulte los enlaces a continuación para obtener más detalles sobre las entradas para iOS:
http://bradfrost.com/blog/mobile/better-numerical-inputs-for-mobile-forms/
http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html
http://mobiforge.com/design-development/html5-mobile-web-forms-and-input-types
http://www.petefreitag.com/item/768.cfm
http://html5tutorial.info/html5-contact.php
Espero que esto te ayudará. :)
Actualizaciones para la personalización (referencia: https://.com/a/20021657/1771795 )
Puedes hacer alguna personalización usando javascript. Tomemos un ejemplo de entrada de moneda con un patrón de decimales en el que e.which leyó el CharCode ingresado y luego lo introdujo en una matriz (antes) que representa los dígitos antes de la marca decimal y otra matriz (después) para mover los valores desde (antes) la matriz más allá marca decimal
HTML:
<input type="tel" id="number" />
JS
Variables y funciones:
// declare variables
var i = 0,
before = [],
after = [],
value = [],
number = '''';
// reset all values
function resetVal() {
i = 0;
before = [];
after = [];
value = [];
number = '''';
$("#number").val("");
$(".amount").html("");
}
// add thousand separater
function addComma(num) {
return num.toString().replace(//B(?=(/d{3})+(?!/d))/g, ",");
}
Código principal:
// listen to keyup event
$("#number").on("keyup", function (e, v) {
// accept numbers only (0-9)
if ((e.which >= 48) && (e.which <= 57)) {
// convert CharCode into a number
number = String.fromCharCode(e.which);
// hide value in input
$(this).val("");
// main array which holds all numbers
value.push(number);
// array of numbers before decimal mark
before.push(value[i]);
// move numbers past decimal mark
if (i > 1) {
after.push(value[i - 2]);
before.splice(0, 1);
}
// final value
var val_final = after.join("") + "." + before.join("");
// show value separated by comma(s)
$(this).val(addComma(val_final));
// update counter
i++;
// for demo
$(".amount").html(" " + $(this).val());
} else {
// reset values
resetVal();
}
});
Reiniciar:
// clear arrays once clear btn is pressed
$(".ui-input-text .ui-input-clear").on("click", function () {
resetVal();
});
Resultado:
Tuve un escenario similar en el que necesitaba admitir tanto la coma como el punto como la marca decimal y la agrupación de dígitos [ver aquí]
P.ej
1.00 / 1,00
1,000,000.00 / 1,000,000,00
Al mismo tiempo, el escenario requería que el teclado numérico se mostrara en dispositivos móviles.
La implementación inicial combinó el tipo ''número'' con el atributo de patrón.
<input type="number" pattern="^(0*[,.]*[0-9][0-9]*([,.][0-9]+)*|[0-9]?[,.][0-9]*[1-9][0-9]*)$" required />
Sin embargo, la validación numérica falló las entradas que el patrón permitiría. Esto significaba que el campo y, por lo tanto, la forma estaban marcados como inválidos.
La solución fue cambiar el tipo a ''tel''.
<input type="tel" pattern="^(0*[,.]*[0-9][0-9]*([,.][0-9]+)*|[0-9]?[,.][0-9]*[1-9][0-9]*)$" required />
Los usuarios móviles ahora verían un teclado numérico de manera predeterminada, y la validación del patrón se usaría para validar la entrada.