Convert span to input and vice versa, using javascript

#tutorial #javascript #html #webdev

[Clique aqui para ler em português]

let’s convert a span to an input using javascript and an input to a span.

Code

First we will create the interface, we will do something simple, using only HTML.

<div id="element">
  <span onclick="spanSwitch(this)"> John </span>
</div>

We have a div with id element to assist in the search with javascript, we have a span that calls a function when clicking.

function spanSwitch(e) {
  let txt = e.innerText;
  let element = document.getElementById('element');

  element.innerHTML = `<input onblur='spanReset(this)' value='${txt}' />`;
  document.getElementsByTagName('input')[0].focus();
}

function spanReset(e) {
  let txt = e.value;
  let element = document.getElementById('element');

  element.innerHTML = `<span onclick='spanSwitch(this)'> ${txt} </span>`;
}

We have two functions:

*spanSwitch = Here the span is replaced by the input, using the span text as the input value;
*spanReset = Here the input is replaced by the span, using the input value as the span text;

ready as simple as that.