2011-11-17 10 views
8

Estoy agregando algunas optimizaciones de usabilidad móvil a nuestro sitio. Como parte de esto, estoy modificando el atributo tipo de los campos de texto, para darle al usuario las mejores herramientas de entrada para el tipo de datos esperado.Detectando si hay claves disponibles en el teclado en pantalla del dispositivo móvil

Un problema con el que me he encontrado en los dispositivos móviles con pantalla táctil es que los navegadores en diferentes sistemas operativos e incluso diferentes navegadores en el mismo sistema operativo muestran diferentes teclados en pantalla cuando se usa input = "number".

Safari en iOS 4.3.3 (iPhone 4) y Chrome en Android 2.3.4 incluyen un punto decimal, pero Firefox en Android 2.3.4 no.

He intentado agregar el atributo de paso (paso = "0.1") sin ninguna mejora en Firefox.

Si no puedo mostrar el punto decimal, tendré que mostrarle a Firefox el teclado QWERTY completo, lo que obviamente no mejorará la experiencia del usuario. También plantea el problema del rastreo de dispositivos/navegadores. O tendré que hacer que QWERTY sea el predeterminado, y mostrar el teclado numérico al puñado de dispositivos con los que puedo probar, o hacer que el teclado numérico sea el predeterminado, y volver a QWERTY en dispositivos que sé que se romperán, la última opción siendo mucho menos robusto ya que no puedo probar en todos los dispositivos que se hayan fabricado.

La prueba de compatibilidad para el tipo de entrada = "número" no es una solución, ya que obviamente el navegador admite el elemento, simplemente no ofrece suficientes opciones de teclado para ingresar todos los tipos de números.

Así que ... Me preguntaba si alguien sabía de una forma de probar la presencia de una determinada clave (como el punto decimal) en el teclado que el navegador/sistema operativo asigna al tipo de entrada, y/o si alguien de lo contrario, tengo algunas sugerencias mejores, ya que soy bastante nuevo en los dispositivos móviles.

También debo mencionar que estoy usando JavaScript aquí, ya que este es un sitio web, no una aplicación nativa.

Gracias :)

+0

¿Funcionaría 'input type =" tel "' para usted? – ozbek

+1

Al menos en Android, no hay ningún requisito de que incluso haya * claves *. Un método de entrada puede usar otras formas, como Grafiti2 usando gestos. No hay forma de que una aplicación nativa de Android determine si el método de entrada actual del usuario muestra alguna clave, y mucho menos desde un navegador. – CommonsWare

Respuesta

1

Desafortunadamente, Firefox no es compatible con el tipo de entrada numérica. Sin embargo, aún puede intentar utilizar estos atributos HTML adicionales para hacer que un campo de entrada solicite al usuario una entrada numérica

inputmode='numeric' 
pattern='[0-9]*' //this makes it show only the numbers 0-9 without all the slashes and dashes and everything. Ignore this if that's not what you want 
+0

'pattern' no es compatible con Safari. – ozbek

Cuestiones relacionadas