How to transform text into input text when clicking?

Asked

Viewed 2,038 times

1

javascript jquery html input

2 answers

7


How about using a div (or p, span, you know) of editable content? There’s an attribute just for that. Behold

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

I guess it doesn’t get any easier than that.

  • I fell mine here worked fine guy, but the first character does not edit. You know why?

  • I figured it out, man, the element has to be block!

2

the best way to do this is with javascript replacing the displaying field in an input, in your example already has 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 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 which he picked up at the beginning of H1’s function. If you have any doubt as to how the code works comments here, I left this example also in this jsfiddle

Browser other questions tagged javascript jquery html input

You are not signed in. Login or sign up in order to post.