Como adicionar verificação ortográfica em elementos de formulário e em elementos de texto editáveis - HTML

Por: Angelo Luis Ferreira | 10/12/2020 Acessos: 7.335

1. Utilizando spellcheck nos elementos HTML de formulário: input e textarea

input

1.1. O elemento input não possui por padrão o spellcheck ativado. Portanto, é necessário ativá-lo se você deseja utilizar o editor gráfico nesse campo.

1.1.1. Para ativar, use a sintaxe spellcheck = "true". Veja o exemplo abaixo:

<input type="text" name="name" spellcheck="true">

textarea

1.2. O elemento textarea já vem configurado por padrão com o spellcheck ativado. Portanto, não é necessário ativá-lo se você deseja utilizar o editor ortográfico nesse campo.

1.1.1. Para desativar, use a sintaxe spellcheck = "false". Veja o exemplo abaixo:

<textarea spellcheck="false">Elemento text Area </textarea>

 1.3. Veja o exemplo abaixo onde ativamos e desativamos a verificação ortográfica dos elementos input e textarea

<h1>Spell check ativado</h1>
<p><input type="text" spellcheck="true"> Elemento input com type="text"</input></p>  
<p><textarea>Elemento textarea</textarea></p>
      	
<h1>Spell check desativado</h1>
<p><input type="text"> Elemento input com type="text"</input></p>  
<p><textarea spellcheck="false">Elemento textarea</textarea></p>

Teste o nosso exemplo no editor abaixo. Clique em Result para testar o código.

1.3.1. Veja na imagem abaixo como deve funcionar o nosso exemplo:

2. Utilizando spellcheck em elementos de texto editáveis HTML

2.1. Para criar um elemento de texto editável em HTML precisaremos utilizar o atributo "contenteditable" como true em qualquer elemento de texto, Veja o exemplo abaixo onde criamos alguns elemento editáveis:

<p contenteditable="true">Isto é um parágrafo p editável.</p> 
<div contenteditable="true">Isto é uma div editável.</div>
<br/>
<spam contenteditable="true">Isto é um spam editável.</spam>
<br/><br/>
<a contenteditable="true" href="/./">Isto é um link editável.</a>
<br/><br/>
<button contenteditable="true">Isto é um botão editável</button>

2.2. Por padrão, o texto editável em HTML é configurado com spellcheck ativado. Portanto, ao clicar sobre o texto HTML podemos alterá-lo e automaticamente a verificação ortográfica é executada.

2.2.1. Para desativarmos a verificação automática, utilize o atributo spellcheck = "false". Veja o exemplo abaixo onde usamos o texto editável com verificação ortográfica e sem a verificação ortográfica.

<h1>Texto editável com verificação ortográfica</h1>
<p contenteditable="true">Isto é um parágrafo p editável.</p> 
<div contenteditable="true">Isto é uma div editável.</div>
<br/>
<spam contenteditable="true">Isto é um spam editável.</spam>
<br/><br/>
<a contenteditable="true" href="/./">Isto é um link editável.</a>
<br/><br/>
<button contenteditable="true">Isto é um botão editável</button>

<h1>Texto editável sem verificação ortográfica</h1>
<p contenteditable="true" spellcheck="false">Isto é um parágrafo p editável.</p> 
<div contenteditable="true" spellcheck="false">Isto é uma div editável.</div>
<br/>
<spam contenteditable="true" spellcheck="false">Isto é um spam editável.</spam>
<br/><br/>
<a contenteditable="true" href="/./" spellcheck="false">Isto é um link editável.</a>
<br/><br/>
<button contenteditable="true" spellcheck="false">Isto é um botão editável</button>

Teste o nosso exemplo no editor abaixo. Clique em Result para testar o código.

2.2.1. Veja na imagem abaixo como deve funcionar o nosso exemplo (clique no texto para editar):

 Documentação Oficial

1. [Atributo spellcheck] » MDN Web Docs - Mozilla

2. [Atributo spellcheck] » Microsoft Docs

3. [Atributo contenteditable] » MDN Web Docs - Mozilla