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

Paul Kinlan

Pode parecer o recurso mais sem graça do mundo, mas acho que é importante porque todo mundo odeia digitar em dispositivos móveis: você odeia, eu detesto. No Chrome para Android (antes do Chrome 43 Beta, em abril de 2015), o desenvolvedor tem pouco controle sobre como o navegador pode ajudar o usuário a inserir texto. Se você estiver digitando em um dispositivo hoje, ele pode ter esta aparência:

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

A Apple introduziu um atributo em HTMLInputElement e HTMLTextAreaElement chamado autocapitalize no iOS 5, que permite ao autor da página sugerir como o navegador deve apresentar o teclado virtual para que o usuário possa otimizar a entrada de texto. Na forma mais simples, é possível indicar que uma caixa de texto precisa usar automaticamente letras maiúsculas na primeira letra de cada nova frase.

A partir do Chrome 43, o Chrome vai oferecer suporte ao atributo autocapitalize em HTMLInputElement e HTMLTextAreaElement, o que vai permitir que você controle o comportamento de maiúsculas automáticas do teclado virtual e o traga em linha com o Safari no iOS.

Autocapitalize só será aplicado a HTMLInputElements que tenham 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.

Confira um exemplo simples que permite ativar a maiúscula automática em frases em uma área de texto:

<textarea autocapitalize="sentences">

Quais valores podem ser usados com a função de maiúsculas automáticas?

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 nenhuma [padrão]
desativado
<input autocapitalize=characters> Letras maiúsculas e minúsculas caracteres
<input autocapitalize=words> Letras maiúsculas e minúsculas palavras
<input autocapitalize=sentences> Letras maiúsculas nas frases frases

Para HTMLInputElement, o valor inválido padrão é Maiúsculas e minúsculas se o tipo do elemento for type=text ou type=search. Caso contrário, será Sem maiúsculas e minúsculas.

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

Para HTMLTextAreaElement, o valor inválido padrão é Maiúsculas de frases. Essa é uma mudança em relação ao comportamento padrão.

  • <textarea autocapitalize="terry"></textarea> seria uma área de texto com Maiúsculas/minúsculas.
  • <textarea></textarea> seria uma área de texto com Frase com a primeira letra maiúscula.
  • <textarea autocapitalize="none"></textarea> seria uma área de texto com sem maiúsculas.

Para HTMLFormElement, decidimos não implementar o atributo, porque descobrimos que ele raramente é usado nas páginas hoje em dia e, quando é usado, é principalmente para desativar a capitalização automática no formulário:

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

O exemplo acima é estranho, porque o estado padrão de HTMLInputElement é sem maiúsculas.

Por que você está usando isso em vez de inputmode?

O inputmode tem como objetivo resolver o mesmo tipo de problema, entre outras coisas. No entanto, faltam implementações de navegador. Até onde sabemos, apenas o Firefox OS tem uma implementação e ela é prefixada (x-inputmode), mas também tem pouco uso na Web. Por outro lado, autocapitalize já é usado em milhões de páginas em centenas de milhares de sites.

Quando devo usar isso?

Esta não é uma lista completa de quando você deve usar autocapitalize. No entanto, há vários lugares em que ajudar o usuário a inserir texto é muito útil:

  • Use autocapitalization=words se você estiver
    • Esperar nomes de pessoas (não todos os nomes seguem essa regra, mas a maior parte dos nomes ocidentais serão capitalizados automaticamente)
    • Nomes das empresas
    • Endereços
  • Use autocapitalization=characters se você espera:
    • Estados dos EUA
    • Códigos postais do Reino Unido
  • Use sentences para elementos de entrada se você espera conteúdo digitado em formato de parágrafo normal, como uma postagem de blog.
  • Use none em TextAreas se você espera que o conteúdo não seja afetado, por exemplo, ao inserir um código.
  • Se você não quiser sugestões, não adicione a função de maiúsculas automáticas.