Ocultando texto ao editar um elemento em JavaScript

Agora vamos fazer com que, durante a edição, o campo de entrada apareça no próprio parágrafo - substituindo o texto desse parágrafo. E que, ao terminar a edição, o campo de entrada seja removido, e o texto do parágrafo volte a aparecer no lugar.

Vamos começar a implementação.

Para começar, vamos fazer com que, ao clicar no parágrafo, um campo de entrada com o texto desse parágrafo seja adicionado ao final dele:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
  let input = document.createElement('input');
  input.value = elem.textContent;
  
  elem.appendChild(input);
});

No entanto, nosso código é muito imperfeito - a cada clique no parágrafo, um novo campo de entrada será adicionado a ele.

Com isso, se o primeiro campo de entrada contiver o texto do parágrafo, o segundo campo de entrada já conterá o texto do parágrafo junto com o primeiro campo de entrada, e o terceiro campo de entrada conterá o texto do parágrafo junto com dois campos de entrada, e assim por diante.

Preste atenção também ao fato de que um clique no campo de entrada adicionado será interpretado como um clique no parágrafo: o problema é que o campo de entrada está localizado dentro do parágrafo, e o clique no campo de entrada simplesmente se propagará para cima, até este parágrafo.

Isso levará ao seguinte: após o aparecimento do primeiro campo de entrada, ao tentar clicar nele para começar a editar, nós automaticamente faremos um clique no parágrafo, com todas as consequências resultantes.

Pronto, o problema foi delineado. Agora vamos corrigi-lo.

Para isso, simplesmente, quando o campo de entrada aparecer, vamos desvincular o manipulador de clique do parágrafo. Nesse caso, apenas o primeiro clique no parágrafo levará ao aparecimento do campo de entrada, e os demais cliques, feitos após o aparecimento do campo de entrada, serão ignorados.

Vamos implementar:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function func() {
  let input = document.createElement('input');
  input.value = elem.textContent;
  
  elem.appendChild(input);
  
  elem.removeEventListener('click', func); // desvincula o evento
});

Agora vamos fazer com que, quando o campo de entrada aparecer, o texto do próprio parágrafo desapareça. Para isso, antes de inserir o campo de entrada, vamos atribuir uma string vazia ao textContent do parágrafo:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function func() {
  let input = document.createElement('input');
  
  input.value = elem.textContent; // primeiro escrevemos o texto do parágrafo no campo de entrada
  elem.textContent = ''; // depois removemos o texto do parágrafo
  elem.appendChild(input); // depois inserimos o campo de entrada
  
  elem.removeEventListener('click', func);
});

Agora vamos fazer com que, quando o campo de entrada perder o foco, o texto desse campo de entrada seja escrito no parágrafo:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function func() {
  let input = document.createElement('input');
  
  input.value = elem.textContent;
  elem.textContent = '';
  elem.appendChild(input);
  
  input.addEventListener('blur', function() {
    elem.textContent = this.value;
  });
  
  elem.removeEventListener('click', func);
});

Preste atenção ao fato de que não precisamos excluir o campo de entrada - ele se exclui sozinho quando escreve seu texto no parágrafo: como o campo de entrada faz parte do texto do parágrafo, a escrita de algum texto nesse parágrafo simplesmente exclui nosso campo de entrada, e pronto.

No entanto, temos mais um problema: o texto do parágrafo será editado apenas na primeira vez. Após a primeira edição, um novo clique no texto do parágrafo não levará a nada.

O problema é que, no momento em que o campo de entrada apareceu, nós desvinculamos o evento do parágrafo pelos motivos descritos acima. Agora precisamos, no momento do término da edição, vincular o evento novamente.

Vamos fazer isso:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function func() {
  let input = document.createElement('input');
  input.value = elem.textContent;
  
  elem.textContent = '';
  elem.appendChild(input);
  
  input.addEventListener('blur', function() {
    elem.textContent = this.value;
    elem.addEventListener('click', func); // adiciona o evento novamente
  });
  
  elem.removeEventListener('click', func);
});