Capitalização automática para dispositivos móveis

Paul kinlan

Este pode parecer o recurso mais pouco impressionante que existe, mas acho que é importante porque todo mundo não gosta de digitar no celular: você odeia, eu detesto. No Chrome para Android (anterior ao Chrome 43 Beta a partir de abril de 2015), um desenvolvedor tem pouco controle sobre como o navegador pode ajudar o usuário a inserir texto. Se você estiver digitando em um dispositivo hoje, talvez ele tenha esta aparência:

Observe que tudo está em minúsculas, exceto alguns valores que o Android reconheceu como um nome.

A Apple introduziu um atributo em HTMLInputElement e HTMLTextAreaElement chamado capitalização automática no iOS 5 e permite que o autor da página dê uma dica sobre como o navegador deve apresentar o teclado virtual para um usuário otimizar a entrada de texto para o usuário. Na forma mais simples, você pode indicar que uma caixa de texto vai usar a primeira letra de cada nova frase em maiúscula automaticamente.

A partir do Chrome 43, o Chrome será compatível com o atributo autocapitalize em HTMLInputElement e HTMLTextAreaElement, o que permitirá que você controle o comportamento de capitalização automática do teclado virtual e o torne inline com o Safari no iOS.

O atributo autocapitalize somente é aplicado a HTMLInputElements com o atributo type definido como: type="text", type="search", type="url", type="tel", type="email" ou type="password". O padrão é não usar letras maiúsculas automaticamente.

Veja um exemplo simples que permite que você use letras maiúsculas automaticamente nas frases em uma área de texto:

<textarea autocapitalize="sentences">

Quais valores podem usar letras maiúsculas automaticamente?

A tabela a seguir mostra os diferentes estados em que um elemento de entrada pode estar:

Estado Palavras-chave
<input>
<input autocapitalize=off> 		Sem letras maiúsculas nenhum [padrão]
desativado
<input autocapitalize=characters> Uso de letras maiúsculas em caracteres de caracteres
<input autocapitalize=words> Palavras com letras maiúsculas palavras
<input autocapitalize=sentences> Letras maiúsculas das frases frases

Para HTMLInputElement, o valor padrão inválido será Frases com letras maiúsculas se o tipo do elemento for type=text ou type=search. Caso contrário, será Sem uso de letras maiúsculas.

  • <input autocapitalize="simon"> seria um campo de texto com Frases com letras maiúsculas.
  • <input type="email" autocapitalize="simon"> seria um campo de texto com sem letras maiúsculas.
  • <input> seria um campo de texto com sem letras maiúsculas.

Para HTMLTextAreaElement, o valor padrão inválido é Sentences Capitalization. Essa é uma mudança em relação ao comportamento padrão.

  • <textarea autocapitalize="terry"></textarea> seria uma área de texto com Frases com letra maiúscula.
  • <textarea></textarea> seria uma área de texto com capitalização de frase;
  • <textarea autocapitalize="none"></textarea> seria uma área de texto com sem letras maiúsculas.

Decidimos não implementar o atributo para HTMLFormElement, porque descobrimos que ele raramente é usado em páginas atualmente. Além disso, quando é usado, ele é usado principalmente para desativar a capitalização automática no formulário:

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

O exemplo acima é estranho, já que o estado padrão de HTMLInputElement é Sem letras maiúsculas.

Por que você está usando isto no inputmode?

O objetivo de inputmode é resolver o mesmo tipo de problema, entre outras coisas. No entanto, faltava implementações no navegador. Até onde sabemos, somente o Firefox OS tem uma implementação e é prefixado (x-inputmode), mas também tem pouco uso na Web. Por outro lado, a autocapitalize é usada em milhões de páginas de milhares de sites.

Quando devo usar isso?

Esta não é uma lista completa de quando usar autocapitalize. No entanto, há vários lugares em que ajudar o usuário a inserir texto agrega um grande valor:

  • Use autocapitalization=words se você tiver:
    • Esperar nomes das pessoas (observação: nem todos os nomes seguem essa regra, mas a maioria dos nomes ocidentais será maiúscula automaticamente como esperado)
    • Nomes das empresas
    • Endereços
  • Use autocapitalization=characters se estiver esperando:
    • Estados dos EUA
    • Códigos postais do Reino Unido
  • Use sentences para elementos de entrada se estiver esperando conteúdo que seja inserido em forma de parágrafo normal, como uma postagem de blog.
  • Use none em TextAreas se estiver esperando conteúdo que não seja afetado, por exemplo, inserindo código.
  • Se não quiser receber dicas, não adicione letras maiúsculas automaticamente.