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 iniciar com letras maiúsculas a 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 controlar o comportamento de capitalização automática do teclado virtual e colocá-lo 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:

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 dicas, não adicione a função de maiúsculas automáticas.

Outros links interessantes

• Proposta de implementação original de Mounir Lamouri