Span to input text to span [duplicate]

This question already has answers here: How do I make a div element editable (like a textarea when I click 开发者_运维知识库it)? (8 answers) Closed 8 years ago.

Possible Duplicate:

What's the best edit-in-place plugin for jQuery?

For example, when you click on a span, it becomes an input-text, and when you click outside the span it becomes an span again, and you could edit the input text. So you basicly change the tag name when you click on it.

But how can you do that? Showing and hiding spans and input-text's does not look like the best solution..

---

Here, take a look at that, it's simplified, but should help you : http://jsfiddle.net/RUwtt/

Html :

<span>My value here!</span>

Javascript :

$(function () {
    $('span').live('click', function () {
        var input = $('<input />', {'type': 'text', 'name': 'aname', 'value': $(this).html()});
        $(this).parent().append(input);
        $(this).remove();
        input.focus();
    });

    $('input').live('blur', function () {
        $(this).parent().append($('<span />').html($(this).val()));
        $(this).remove();
    });
});

---

Some Browsers support the 'contenteditable'-attribute, which makes it possible to just click the element and edit the content. You could catch the focus and blur events of you editable elements to save the changes.

See: http://html5demos.com/contenteditable

---

We have such a solution in production. A form displays information about a contact with span tags, along with an edit image. When clicked, the span tag rotate to show an input text to do modifications... We are using the JQuery Flip plugin to handle this. The final effetc is pretty slicky