JSFiddle - React, Tailwind, and code Playground

by Maiki Nahara

HTML

<h2 id='elH2'>
Agus Gramajo
</h2>
<input value='Agus Gramajo' class='my-input hidden' id='myInput' />

CSS

.my-input {
  border: none;
  font-size: 24px;
}

.hidden {
  display: none;
}

JavaScript

(function probando() {

  const myInput = $('#myInput')
  const elH2 = $('#elH2')
  let prevName = ''

  elH2.on('click', () => {
    elH2.toggle('.hidden')
    myInput.toggle('.hidden')
    prevName = elH2.text()
    myInput.focus()
  })

  myInput.on('blur', () => {
    if (myInput.val() !== prevName) {
      elH2.text(myInput.val())
      elH2.toggle('.hidden')
      myInput.toggle('.hidden')
    } else {
      elH2.toggle('.hidden')
      myInput.toggle('.hidden')
    }
  })
})()