Usar mayúsculas automáticamente en dispositivos móviles

Esta puede parecer la función más poco impresionante que existe, pero creo que es importante porque a todos no les gusta escribir en dispositivos móviles: lo odias, me desagrada. En Chrome para Android (versiones anteriores a Chrome 43 - Beta a partir de abril de 2015), los desarrolladores tienen poco control sobre la manera en la que el navegador puede ayudar al usuario a ingresar texto. Si estás escribiendo en un dispositivo hoy, es posible que se vea de la siguiente manera:

Observa que todo está en minúsculas, excepto algunos valores que Android reconoció un nombre.

Apple introdujo un atributo en HTMLInputElement y HTMLTextAreaElement llamado mayúsculas automáticas en iOS 5, y permite que el autor de la página sugiera cómo el navegador debe presentar el teclado virtual para que un usuario optimice la entrada de texto. En su forma más simple, podrías indicar que un cuadro de texto debe utilizar mayúsculas automáticamente en la primera letra de cada oración nueva.

A partir de Chrome 43, Chrome admitirá el atributo autocapitalize en HTMLInputElement y HTMLTextAreaElement, lo que te permitirá controlar el comportamiento del uso de mayúsculas automático del teclado virtual y lo alineará con Safari en iOS.

autocapitalize solo se aplicará a los elementos HTMLInputElement que tengan el atributo type configurado como type="text", type="search", type="url", type="tel", type="email" o type="password". La configuración predeterminada es no utilizar mayúsculas automáticamente.

Este es un ejemplo simple que te permite utilizar mayúsculas automáticamente en oraciones de un área de texto:

<textarea autocapitalize="sentences">

¿Qué valores se pueden usar con mayúsculas automáticamente?

En la siguiente tabla, se muestran los diferentes estados en los que puede estar un elemento de entrada:

Estado Palabras clave
<input>
<input autocapitalize=off>
Sin uso de mayúsculas ninguno [predeterminado]
desactivado
<input autocapitalize=characters> Mayúsculas de caracteres caracteres
<input autocapitalize=words> Mayúsculas en palabras palabras
<input autocapitalize=sentences> Mayúsculas en oraciones oraciones

Para HTMLInputElement, el valor predeterminado no válido es Sentences Capitalization si el tipo de elemento es type=text o type=search. De lo contrario, es No Capitalization.

  • <input autocapitalize="simon"> sería un campo de texto con mayúsculas de oración.
  • <input type="email" autocapitalize="simon"> sería un campo de texto con Sin mayúsculas.
  • <input> sería un campo de texto con Sin mayúsculas.

Para HTMLTextAreaElement, el valor predeterminado no válido es Sentences mayúsculas. Este es un cambio del comportamiento predeterminado.

  • <textarea autocapitalize="terry"></textarea> sería un área de texto con mayúsculas de oración.
  • <textarea></textarea> sería un área de texto con mayúsculas de oraciones.
  • <textarea autocapitalize="none"></textarea> sería un área de texto con Sin uso de mayúsculas.

En el caso de HTMLFormElement, decidimos no implementar el atributo, ya que descubrimos que actualmente se usa muy poco en las páginas y, cuando se utiliza, se emplea principalmente para inhabilitar las mayúsculas automáticas en el formulario por completo:

<form autocapitalize=off><input></form>

El ejemplo anterior es impar, ya que el estado predeterminado de HTMLInputElement es Sin mayúsculas.

¿Por qué usas esta extensión durante inputmode?

inputmode está diseñado para resolver el mismo tipo de problema, entre otras cosas. Sin embargo, faltan implementaciones de navegador. Hasta el mejor conocimiento, solo el SO Firefox tiene una implementación y tiene el prefijo (x-inputmode), pero también tiene muy poco uso en la Web. Por otro lado, autocapitalize se usa en millones de páginas de cientos de miles de sitios web.

¿Cuándo debería usarla?

Esta no es una lista exhaustiva de cuándo deberías usar autocapitalize. Sin embargo, hay muchos casos en los que ayudar al usuario a ingresar texto proporciona un gran valor:

  • Usa autocapitalization=words en los siguientes casos:
    • Expectativa de nombres de personas (nota: no todos los nombres siguen esta regla, pero la mayoría de los nombres occidentales utilizarán mayúsculas automáticamente como se espera)
    • Nombres de empresa
    • Direcciones
  • Usa autocapitalization=characters si esperas lo siguiente:
    • Estados de EE.UU.
    • Códigos postales del Reino Unido
  • Usa sentences para los elementos de entrada si esperas contenido que se ingresa en forma de párrafo normal, por ejemplo, una entrada de blog.
  • Usa none en TextAreas si esperas contenido que no debería verse afectado; por ejemplo, ingresar código.
  • Si no quieres incluir sugerencias, no agregues mayúsculas automáticamente.