Search code examples
javascriptdomcontenteditableinplace-editing

Transform label into input text

There's some big companies that allow you to click on a label and trigger a event that transform that tag into a editable tag. So you can make whatever changes you want and then press enter(or something else) to edit(mostly using ajax).

Is there such a way of doing that using javascript or whatever?

Already tried change the tagName attribute, but I think this obviously wouldn't work.

Does someone got a approach?

p.s.: Haven't find this in SO. I'm sorry if I didn't use the right keywords to search for it.

Solution

  • If you need edit just a plain text, then use solution mentioned by BotskoNet.

    If you need more editing options (a WYSIWYG editor), then you should try e.g. http://ckeditor.com/demo#inline. CKEditor is based on contenteditable mentioned by elclanrs, but it fixes huge amount of browsers' bugs and unifies their behaviour.