Início /Programação /HTML /Como tornar elementos HTML editáveis

Como tornar elementos HTML editáveis

Por: Angelo Luis Ferreira | 04/01/2021 Acessos: 7.991

Neste artigo vamos mostrar como usar o atributo contenteditable para definir o conteúdo de um elemento HTML como editável ou não.

Observações:

a) O conteúdo editável de um elemento HTML é compatível na maioria dos navegadores atuais.

b) Quando o atributo contenteditable não é definido em um elemento, o element irá herdá-lo do seu pai. Por padrão, contenteditable é false, ou seja, torna o conteúdo do elemento HTML não editável.

c) Por padrão, o conteúdo editável em HTML é configurado com spellcheck ativado. Portanto, ao clicar sobre o texto de um elemento HTML editável podemos alterá-lo e automaticamente a verificação ortográfica é executada. Para desativá-la, leia: Como adicionar verificação ortográfica em elementos de formulário e em elementos de texto editáveis - HTML 

1. Utilizando o atributo "contenteditable" em um elemento HTML

1.1. Para tornar editável o texto do conteúdo de um elemento HTML quando executado no navegador, defina o atributo contenteditable como true. Veja a tabela abaixo:

Value Descrição
true Especifica que o elemento é editável
false Especifica que o elemento não é editável

1.1.1. Para ativar a edição do conteúdo de um elemento HTML, use a sintaxe contenteditable = "true". Veja o exemplo abaixo:

<p contenteditable="true">Isto é um parágrafo editável.</p>

1.2. Como funciona a edição? Para alterar o conteúdo do elemento HTML basta clicar sobre o referido texto e editá-lo. Veja o exemplo do nosso parágrafo editável abaixo:

1.3. A seguir, veja um exemplo onde adicionamos vários tipos de elementos HTML editáveis.

<h1 contenteditable="true">Isto é um cabeçalho h1 editável</h1>

<p contenteditable="true">Isto é um parágrafo 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>
<br/><br/>

<ul contenteditable="true">
	<li>Primeiro item da lista editável</li>
    <li>Segundo item da lista editável</li>
    <li>Terceiro item da lista editável</li>
</ul>

 😀 Teste o nosso exemplo no Squids Editor. Clique em Executar para testar o código.

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

Documentação Oficial

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

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários

×

Infomações do site / SEO