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

Paul Kinlan

Puede parecer la función menos impresionante que existe, pero creo que es importante porque a todos les disgusta escribir en dispositivos móviles: a ti te molesta, a mí me repugna. En Chrome para Android (anterior a Chrome 43, versión beta a partir de abril de 2015), los desarrolladores tienen poco control sobre cómo el navegador puede ayudar al usuario a ingresar texto. Si estás escribiendo en un dispositivo hoy, podría verse de la siguiente manera:

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

Apple introdujo un atributo en HTMLInputElement y HTMLTextAreaElement llamado autocapitalize en iOS 5, que permite al autor de la página sugerir cómo el navegador debe presentar el teclado virtual para que el usuario optimice la entrada de texto. En su forma más simple, puedes indicar que un cuadro de texto debe escribir con mayúscula automáticamente 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 de la mayúscula automática del teclado virtual y alinearlo con Safari en iOS.

autocapitalize solo se aplicará a los HTMLInputElement que tengan el atributo type configurado en type="text", type="search", type="url", type="tel", type="email" o type="password". La opción predeterminada es no usar la mayúscula automática.

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

<textarea autocapitalize="sentences">

¿Qué valores puede tomar la mayúscula automática?

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 mayúsculas ninguno [predeterminado]
desactivada
<input autocapitalize=characters> Uso de mayúsculas en los caracteres caracteres
<input autocapitalize=words> Uso de mayúsculas en las palabras palabras
<input autocapitalize=sentences> Uso de mayúsculas en oraciones oraciones

Para HTMLInputElement, el valor predeterminado no válido es Sentences Capitalization si el tipo del 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 en oraciones.
  • <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 Capitalization. Este es un cambio con respecto al comportamiento predeterminado.

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

En el caso de HTMLFormElement, decidimos no implementar el atributo porque descubrimos que, en la actualidad, rara vez se usa en las páginas y, cuando se usa, se usa principalmente para inhabilitar la mayúscula automática en el formulario por completo:

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

Lo anterior es extraño, ya que el estado predeterminado de HTMLInputElement es Sin mayúsculas.

¿Por qué usas esto en lugar de inputmode?

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

¿Cuándo debo usarla?

Esta no es una lista exhaustiva de cuándo debes usar autocapitalize. Sin embargo, hay varios lugares en los que ayudar al usuario a ingresar texto proporciona un gran valor:

  • Usa autocapitalization=words si cumples con los siguientes requisitos:
    • Espera nombres de personas (nota: no todos los nombres siguen esta regla, pero la mayoría de los nombres occidentales se escribirán en 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 sugerencias, no agregues la función de mayúsculas automáticas.