jQuery Inline Edit

Lightweight, jQuery inline-edit plugin.

HTML

<script src="javascript url"></script>
<form>
    <input type="hidden" name="hiddenField" />
</form>

<div id="text">Please edit me...</div>

<script type="text/javascript">
var replaceWith = $('<input name="temp" type="text" />'),
    connectWith = $('input[name="hiddenField"]');

$('#text').inlineEdit(replaceWith, connectWith);
</script>

CSS

/* Making look nice */
/* body { padding: 1em; font-family: Arial; font-size: 14px; }
input[type="text"] { padding: 0.4em; font-family: Arial; }
 */
/* Inline Edit */

JavaScript

$.fn.inlineEdit = function(replaceWith, connectWith) {

    $(this).hover(function() {
        $(this).addClass('hover');
    }, function() {
        $(this).removeClass('hover');
    });

    $(this).click(function() {

        var elem = $(this);

        elem.hide();
        elem.after(replaceWith);
        replaceWith.focus();

        replaceWith.blur(function() {

            if ($(this).val() != "") {
                connectWith.val($(this).val()).change();
                elem.text($(this).val());
            }

            $(this).remove();
            elem.show();
        });
    });
};