How to transform text into input text when clicking?

How about using a div (or p , span , you know) of editable content? There is only one attribute . See

<p contenteditable="true">Este texto é editável. Clique aqui e veja funcionando.</p>

I do not think it's easier than that.

The best way to do this is with javascript replacing the field displaying in an input, in your example you already have the javascript:

window.onload = function(){
  function editTitle(){
    var title = document.getElementsByTagName('h1')[0];
    var span = title.firstChild;
    span.onmouseover = function(){
      this.title = 'Clique para editar o texto';
      this.style.background = '#f5f5f5';
    }
    span.onmouseout = function(){
      this.title = '';
      this.style.background = '';
    }
    span.onclick = function(){
      var textoAtual = this.firstChild.nodeValue;
      var input = '<input type="text" name="1" value="'+textoAtual+'">';
      this.innerHTML = input;
      var field = this.firstChild;
      this.onclick = null;
      this.onmouseover = null;
      field.focus();
      field.select();
      field.onblur = function(){
        this.parentNode.innerHTML = this.value;
        editTitle();
      }
    }
  }
  editTitle();
}

where in document.getElementsByTagName('h1')[0] it specifies the element that it wants to receive the text and replace with an input.

var input = '<input type="text" name="1" value="'+textoAtual+'">';

In this part it inserts the input, taking the textoAtual that it picked up at the start of the h1 function. If you have questions about how the code works comment here, I left this example also in this jsfiddle