08.03.2025

Desativando a Verificação Ortográfica no Chrome/Safari: HTML/CSS

Resposta Rápida

Se as sublinhadas vermelhas no seu navegador estão te incomodando, defina o atributo spellcheck como false:

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

Dessa forma, você pode desativar a verificação ortográfica para qualquer elemento onde não seja necessária.

Procedimento para Desativar a Verificação Ortográfica

Para desativar a verificação ortográfica em formulários HTML, siga estas etapas:

1. Para cada elemento individual (<input> ou <textarea>), adicione o atributo spellcheck="false".
2. Se você quiser desativar a verificação ortográfica para todos os elementos do formulário, atribua spellcheck="false" à tag <form>:

<form spellcheck="false">
  <!-- Campo de entrada sem verificação ortográfica -->
</form>

3. Infelizmente, CSS não permite controlar a verificação ortográfica, portanto, não terá efeito aqui.
4. Em um ambiente React, utilize o camelCase: especifique spellCheck={false}:

<input type="text" spellCheck={false} /> <!-- React sem verificação ortográfica desnecessária -->

5. Para evitar o preenchimento automático e a correção automática, use autocomplete="off" e autocorrect="off".
6. É importante testar sua solução em diferentes navegadores.

Notas de Interesse do Usuário

Antes de fazer alterações no código:

• Considere seus usuários: As sublinhadas vermelhas podem ser úteis para alguns usuários, então habilite ou desabilite esse recurso com base nas preferências deles.
• Diferença entre Preenchimento Automático e Correção Automática: Essas funções não devem ser confundidas com a verificação ortográfica.
• Configurações do Usuário: Configurações individuais do navegador do usuário podem sobrepor seus atributos.

Visualização

Agora, vamos visualizar nosso HTML/CSS em ação:

<input type="text" spellcheck="false" /> <!-- As sublinhadas desapareceram! -->

Imagine seu teclado (⌨️) como um nutricionista incansável eliminando a verificação ortográfica (🖊️🚫) da sua dieta:

Antes: ⌨️ + 🖊️🔴 = Digitando sob pressão!
Depois: ⌨️ + 🖊️🚫 = Digitando sem estresse e distrações.

E o CSS pode tornar sua interface perfeita:

input {
  /* Sem correções desnecessárias */
  -webkit-user-modify: read-write-plaintext-only;
}

Vamos Explorar Mais a Fundo o spellcheck

Vamos explorar o atributo spellcheck:

• Especificação HTML5: O que o documento WHATWG afirma sobre o comportamento do navegador, incluindo a verificação ortográfica.
• Atributo Spellcheck: Introduzido no padrão HTML5 e realiza sua função de forma eficaz.
• Navegadores: Verifique como o spellcheck é suportado em vários navegadores.

Cuidado com Armadilhas

Ao navegar na web, tenha cautela:

• Use com Sabedoria: Desativar a verificação ortográfica de forma descuidada pode reduzir a usabilidade.
• Não Sobrescreva Configurações do Usuário: Configurações pessoais do usuário podem sobrepor seu atributo spellcheck.
• Estilos do Agente do Usuário: Nem todos os estilos do navegador são disponíveis para alterações. Tenha cuidado ao trabalhar com elementos editáveis.

O "Poder Mágico" do Atributo Spellcheck

Ao usar o spellcheck, você pode realizar um pouco de magia:

• Performance: Desativar esse recurso pode acelerar o desempenho do navegador.
• Aumenta a Produtividade do Usuário: A ausência de marcadores vermelhos permite que os usuários se concentrem mais na tarefa em questão.

Recursos Úteis

1. spellcheck - HTML: HyperText Markup Language | MDN — Uma visão detalhada do atributo spellcheck no MDN.
2. Atributo global spellcheck no HTML — Informações sobre spellcheck fornecidas pelo W3Schools.
3. “spellcheck” | Posso usar... Tabelas de suporte para HTML5, CSS3, etc — O recurso “Posso usar” revela a compatibilidade do atributo spellcheck.
4. Aguarde um momento... — Uma página com uma descrição detalhada do spellcheck.
5. Não Encontrado - CSS-Tricks — CSS-Tricks compartilha truques sobre "suppressing" a verificação ortográfica desnecessária.
6. Blog do Chromium — Junte-se aos criadores do Chrome e explore todas as nuances de como funciona a verificação ortográfica em formulários da web.

Video

Navigation