Este artigo discute como lidar com eventos de alteração de conteúdo editável em JavaScript e explica isso com a ajuda de um exemplo.
Como lidar com eventos de mudança editáveis de conteúdo em JavaScript?
O contenteditable é um atributo enumerado. O usuário pode fazer alterações no conteúdo considerando suas necessidades. Se for permitido, o navegador altera seu widget para permitir a modificação dos elementos.
Quais valores são permitidos por um evento de mudança com conteúdo editável?
O contenteditable pode assumir qualquer um destes valores:
- plaintext-only representa que o texto original pode ser editado embora a formatação rich text esteja desabilitada.
- Uma string vazia ou verdadeira, o que significa que o elemento pode ser editado.
- false, implicando que o elemento não pode ser editado.
Exemplo
O exemplo a seguir explica como o conteúdo editável pode ser usado em uma página da web. Vejamos o código abaixo para entendê-lo melhor:
HTML
Aqui está um código HTML que explica o uso dos eventos de alteração de conteúdo editável:
< bloco de citação conteúdo editável = 'verdadeiro' >
< h3 > EDITE SEU CONTEÚDO AQUI! < / h3 >
< / bloco de citação >
No código HTML acima:
- Uma tag blockquote é criada com o atributo contenteditable definido como true. Isso permitirá que o conteúdo dentro da tag blockquote seja editado.
- Uma tag h3 está presente dentro da tag blockquote. Diz “EDITE SEU CONTEÚDO AQUI!”, pois está presente dentro do
, o que significa que o conteúdo pode ser editado pelo usuário.
CSS
Para tornar nosso código visualmente atraente, usamos o seguinte código CSS:
bloco de citação {
fundo : pêssego ;
raio da fronteira : 10 pixels ;
margem : 10 pixels ;
}
citação em bloco h3 {
preenchimento : 10 pixels ;
}
No código CSS acima:
- O fundo da tag blockquote está definido para ter uma cor pêssego com um raio de borda de 10px e uma margem de 10px.
- O cabeçalho h3 dentro do blockquote está definido para ter um preenchimento de 10px.
Saída :
A saída a seguir explica como o conteúdo pode ser editado usando o evento contenteditable change em JavaScript:
Importância de editar o conteúdo
- Maior interatividade, pois o usuário pode modificar o conteúdo de forma conveniente.
- A personalização conveniente como programador com a ajuda de JavaScript pode criar comportamentos modificados, como salvamento automático, desencadeando diferentes ações com base na entrada do usuário.
- Ajuda a agilizar o processo de edição, permitindo ao usuário editar dinamicamente sem a necessidade de um campo de texto separado.
Conclusão
Os eventos de mudança editáveis de conteúdo em JavaScript permitem que o usuário modifique o conteúdo, tornando a página da web responsiva e personalizável. Isso abre caminho para o desenvolvimento web centrado no usuário, onde um usuário pode editar o conteúdo de uma página web em tempo real, permitindo uma experiência de usuário mais responsiva. Este artigo discutiu como lidar com eventos de alteração de conteúdo editável em JavaScript e explicou isso com a ajuda de um exemplo.