Converter SPAN para INPUT

Walter Nascimento
Walter Nascimento | PT-BR
1 min readNov 28, 2020

Converter span para input e vice-versa, usando javascript.

[click here for English]

Vamos converter um span para um input usando javascript e um input para um span.

Código

Primeiro vamos criar a interface, faremos algo simples, utilizando apenas HTML.

Código em HTML

Temos uma div com id element para auxiliar na busca com javascript, temos um span que chama uma função ao clicar.

Código em JS

Temos duas funções:

  • spanSwitch = Aqui é substituído o span pelo input, usando o texto do span como o valor do input;
  • spanReset = Aqui é substituído o input pelo span, usando o valor do input como o texto do span;

pronto simples assim.

Demo

Veja abaixo o projeto completo funcionando.

Projeto no codepen

Youtube

Se preferi assistir, vejo o desenvolvimento no youtube.

Video no youtube

Obrigado por ler!

Se você tiver alguma dúvida, reclamação ou dica, pode deixar aqui nos comentários. Vou ter o maior prazer em responder!

😊😊 Até mais! 😊😊

--

--