writingsuggestions: Controlando as Sugestões de Escrita do Navegador

Alguns navegadores baseados em Chromium (e, mais recentemente, o Safari) passaram a exibir sugestões de texto automáticas em campos editáveis — um texto "fantasma" que aparece à frente do cursor, parecido com o autocomplete de um editor de código, sugerindo como completar a frase que está sendo digitada. É um recurso do próprio navegador, não do site. O atributo global writingsuggestions dá ao desenvolvedor controle sobre esse comportamento, permitindo ligá-lo ou desligá-lo em campos ou seções específicas da página.

O problema que ele resolve

Sugestões de escrita são úteis num campo de busca ou numa caixa de comentário comum, mas atrapalham em campos onde o texto fantasma pode confundir o usuário ou colidir com uma UI própria de autocomplete — por exemplo, um editor que já sugere trechos de código, um campo de e-mail com validação em tempo real, ou um formulário onde o texto sugerido poderia ser confundido com um valor já preenchido. Antes do writingsuggestions, não havia como desativar apenas esse recurso do navegador sem efeitos colaterais.

Como funciona

É um atributo enumerado que aceita "true" ou "false" (também pode ser usado como atributo booleano). Por padrão, nos navegadores que suportam o recurso, as sugestões vêm habilitadas:

<!-- Sugestões desabilitadas apenas neste campo -->
<textarea writingsuggestions="false"></textarea>

<!-- Explicitamente habilitado (é o padrão, raramente necessário declarar) -->
<input type="text" writingsuggestions="true">

Diferente de um atributo booleano como disabled, o valor precisa ser escrito por extenso: writingsuggestions sem valor, ou com qualquer valor que não seja "false", é tratado como "true".

O atributo é herdado pelos elementos filhos, então também pode ser aplicado em um elemento ancestral para desativar as sugestões em toda uma região da página de uma vez:

<form writingsuggestions="false">
    <label>Nome de usuário</label>
    <input type="text" name="username">

    <label>Comentário</label>
    <textarea name="comentario"></textarea>
</form>

Um filho pode sobrescrever o valor herdado do ancestral, ligando as sugestões de volta apenas onde fizer sentido:

<form writingsuggestions="false">
    <textarea name="codigo"></textarea>

    <!-- este campo específico volta a ter sugestões -->
    <textarea name="mensagem" writingsuggestions="true"></textarea>
</form>

Controlando via JavaScript

Existe também a propriedade writingSuggestions correspondente no elemento, útil para alternar o comportamento dinamicamente sem reescrever o atributo:

const editor = document.querySelector('#editor-de-codigo');

// desliga as sugestões assim que o modo "código" é ativado
editor.writingSuggestions = false;

console.log(editor.writingSuggestions); // false

Casos de uso

Editores de código ou de markdown embutidos na página, onde o texto fantasma do navegador conflita com o realce de sintaxe ou com um autocomplete próprio.
Campos de e-mail, senha, CPF ou outros dados estruturados, onde uma sugestão de texto livre não faz sentido e pode confundir o usuário sobre o que já foi digitado.
Formulários inteiros de aplicações mais "sérias" (painéis administrativos, formulários fiscais) onde a experiência deve ser previsível, sem textos sugeridos pelo navegador aparecendo por cima do que o usuário digita.
Campos de chat ou comentário onde o produto já tem um recurso próprio de sugestão de texto (como um assistente de IA) e a sugestão nativa do navegador geraria sobreposição visual.

Cuidados

writingsuggestions controla apenas o recurso de sugestão de texto do próprio navegador — ele não tem relação com o atributo autocomplete, que trata do preenchimento de valores anteriores salvos pelo navegador (como endereços ou senhas), nem com spellcheck, que controla o sublinhado de correção ortográfica. Desligar um não afeta o outro, e é comum precisar combinar os três em campos mais sensíveis:

<input type="text" name="cpf" autocomplete="off" spellcheck="false" writingsuggestions="false">

Compatibilidade

Suportado no Chrome e Edge a partir da versão 124 (abril de 2024) e no Safari a partir da versão 18 (setembro de 2024), incluindo Safari no iOS. O Firefox ainda não implementa o atributo. Como o comportamento padrão do navegador já é o mesmo independente do atributo estar presente, usar writingsuggestions="false" é seguro mesmo em navegadores sem suporte: eles simplesmente ignoram o atributo, sem quebrar nada.

caniuse

Conclusão

O writingsuggestions tapa uma lacuna pequena, mas incômoda: até então, um recurso de UI controlado inteiramente pelo navegador não podia ser ajustado pelo site, mesmo quando atrapalhava a experiência em campos específicos. Como o atributo é apenas mais um ajuste declarativo — e degrada bem em navegadores sem suporte — já pode ser adicionado hoje em qualquer campo onde o texto fantasma do navegador não seja bem-vindo.