08.03.2025

Desabilitando a Verificação Ortográfica em Campos de Entrada HTML

Resposta Rápida

Para desabilitar a verificação ortográfica nos elementos <input> e <textarea>, utilize o atributo spellcheck="false". Isso informa ao navegador para ignorar possíveis erros nesses campos.

<input type="text" spellcheck="false">
<textarea spellcheck="false"></textarea>

Desativando Todas as Funções de Auto-preenchimento

Muitas Maneiras de Desativar

Além de spellcheck="false", é útil conhecer outros atributos que ajudam a desativar recursos automáticos: autocomplete="off", autocorrect="off" e autocapitalize="off". Essas configurações tornarão seu navegador ainda mais amigável.

• autocomplete="off"

  Desativa o auto-preenchimento. Valorizamos sua opinião, mas talvez possamos viver sem isso!

• autocorrect="off"

  Deixemos os humanos controlarem a autocorreção!

• autocapitalize="off"

  Não há necessidade de capitalizar automaticamente cada palavra. Podemos gerenciar sem isso.

Aplicabilidade a Diferentes Dispositivos e Elementos

Os atributos acima funcionam tanto em navegadores de desktop quanto móveis, sendo aplicáveis às tags <input> e <textarea>.

Limitações do JavaScript

JavaScript é poderoso, mas não pode ignorar as configurações do usuário. JavaScript, reconhecemos suas capacidades, mas também respeitamos a autonomia do usuário!

Lidando com Navegadores Teimosos

Alguns navegadores respeitam as preferências definidas, mas outros não. Lembre-se de que certos navegadores podem desconsiderar o atributo `spellcheck a seu critério.

A Importância do Local do Atributo

Coloque o spellcheck na tag de abertura do elemento. É como declarar o tema de uma festa antes da chegada dos convidados.

Antes de Desabilitar

Considere se essa é uma boa escolha do ponto de vista da experiência do usuário. Podemos facilitar a vida dos usuários, então não os prive de ferramentas úteis sem uma necessidade clara!

Visualização

Desabilitar a verificação ortográfica pode ser comparado a enviar uma carta pessoal que não implica correções externas.

Sem `spellcheck="false"`:   Com `spellcheck="false"`:
🖊️📝➡️🔍✉️                       🖊️📝🔒✉️

spellcheck="false" atua como um selo, protegendo sua mensagem de "edições" externas.

Verificação de Compatibilidade

Não se esqueça de testar a compatibilidade dos atributos em vários navegadores para evitar surpresas indesejadas.

Autocorreção em Navegadores Móveis

Os navegadores móveis, especialmente em iOS, podem ser excessivamente ansiosos com correções. autocorrect="off" doma seu fervor.

Aprovado pelo HTML5

O atributo spellcheck é suportado pela especificação oficial do HTML5, portanto, isso não é um truque, mas uma prática normal.

Importância da Acessibilidade

Lembre-se do impacto de desabilitar recursos na acessibilidade da interface. Isso pode dificultar as coisas para alguns usuários. É como remover corrimãos de uma escada.

Informando os Usuários

Se você decidir desabilitar a verificação ortográfica, informe os usuários sobre isso, fornecendo dicas ou rótulos para que eles saibam o que esperar. É como um aviso sobre um elevador fora de funcionamento.

Recursos Úteis

1. spellcheck - HTML | MDN — Guia abrangente sobre o atributo spellcheck no MDN.
2. Atributo HTML spellcheck | W3Schools — Explicação simples e clara do atributo no W3Schools.
3. Padrão HTML | WHATWG — Detalhes sobre spellcheck do WHATWG.
4. Can I use... Tabelas de suporte para HTML5 — Tabelas de suporte do navegador que acompanham o status do atributo.
5. WebAIM: Criando Formulários Acessíveis — Um artigo sobre como as configurações de elementos de formulário impactam a acessibilidade.
6. Como posso desativar o verificador ortográfico em campos de texto no iPhone | Stack Overflow — Dicas de profissionais para solucionar a verificação ortográfica em dispositivos móveis.

Video

Navigation