número de tipo de input html5 con patrón regex en mobile

Estoy intentando get un patrón de expresión regular en el number tipo de input para mostrar solo numbers y puntos. He intentado algo como esto.

 <input type="number" pattern="[0-9.]*"> <input type="tel"> 

Ambos muestran solo los numbers (0-9), pero no se muestran. (punto). Necesito usar el punto en el campo de input.

¿Es posible a través de html5? ¿O voy a ir con javascript?

Nota: Esto funciona bien en Android, pero. (punto) que no se muestra en iphones

Necesito mostrar el keyboard mobile como este …

introduzca la descripción de la imagen aquí

¿Alguna ayuda con respecto a esto?

Si solo especifica "tipo = número", mostrará el keyboard en el iPhone como:

introduzca la descripción de la imagen aquí

Y si especifica un patrón como <input type="number" pattern="\d*"/> o <input type="number" pattern="[0-9]*" /> , el keyboard en el iPhone será como :

introduzca la descripción de la imagen aquí

Aún así no puede mostrar el punto (.), Actualmente no hay un patrón para manejar dicho caso.

Entonces puede optar por <input type="tel" /> que proporcionará el keyboard como:

introduzca la descripción de la imagen aquí

Consulte los enlaces a continuación para get más detalles sobre las inputs 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

https://about.zoosk.com/nb/engineering-blog/mobile-web-design-use-html5-to-trigger-the-appropriate-keyboard-for-form-inputs/

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 (reference: https://stackoverflow.com/a/20021657/1771795 )

Puede hacer algunas personalizaciones con javascript. Tomemos como ejemplo el ingreso de moneda con un patrón de decimales en el que e.which leer CharCode ingresó y luego lo empujamos a una matriz (antes) que representa los dígitos antes de la marca decimal y otra matriz (después) para mover los valores de (antes) matriz pasado marca decimal

completar el enlace del violín

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:

introduzca la descripción de la imagen aquí

No todos los types de input y attributes son compatibles en todos los browseres. En general, la mayoría de los browseres modernos de IE10 + incluyen conceptos básicos como correo electrónico y número.

El browser volverá a una input de text estándar cuando un tipo específico e ignorará los attributes cuando esos valores no sean compatibles.

introduzca la descripción de la imagen aquíintroduzca la descripción de la imagen aquí

Entonces 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 del browser para el tipo 'tel'

  • Android (sí)
  • iOS (sí)
  • IE (sí)
  • Móvil (sí)
  • Opera (si)
  • Móvil (sí)
  • Opera (si)
  • Clásico (sí)
  • Opera Mini (no)
  • Firefox (si)
  • Móvil (sí)
  • Chrome para Android (sí)

(Fuentes: caniuse.com, DeviceAtlas, mobilehtml5.org)

Soporte del browser para el atributo de patrón

Pero el atributo de patrón es compatible con Internet Explorer 10, Firefox, Opera y Chrome. Y no es compatible con Internet Explorer 9 y versiones anteriores , ni con Safari .

Desafortunadamente no es posible lograr la funcionalidad exacta que estás buscando no es posible. Sin embargo, hay una especie de "hack" 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, así: 0.01 -> 0.12 -> 1.23 -> 12.34. Entonces esto se puede usar para efectos similares.

Tuve un escenario similar por el cual necesitaba soportar tanto la coma como el punto, ya que tanto la marca decimal como la agrupación de dígitos [ver aquí]

P.ej

1.00 / 1,00
1,000,000.00 / 1,000,000.00

Al mismo time, el escenario requería que el keyboard numérico se mostrara en dispositivos mobilees.

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]*)$" requinetworking /> 

Sin embargo, la validation de numbers falló en las inputs que permitiría el patrón. Esto significaba que el campo y, por lo tanto, la forma se marcaban como no válidos.

La solución era cambiar el tipo a 'tel'.

 <input type="tel" pattern="^(0*[,.]*[0-9][0-9]*([,.][0-9]+)*|[0-9]?[,.][0-9]*[1-9][0-9]*)$" requinetworking /> 

Los usuarios mobilees ahora verían un keyboard numérico por defecto, y la validation del patrón se utilizaría para validar la input.