Change input text to regular text on blur and ability to edit jQuery

Question

I'm creating a form where I'm eliminating the use of a save button. The form is made up of input text boxes and textareas. After the user enters data into the input field, I want to trigger an onBlur function and change the input into a span that contains the information that the user entered.

I also want to have the ability to edit this information, so if the user clicks on the newly created span with text, it will turn back into the input field with the current information for their editing pleasure.

For reference, I'm looking to have a functionality pretty much like on editing a photo title on Flickr.

If possible, I'd also like to have the textbox show "saving..." for half a second after the blur to reflect interaction with server.

Answer 1

I played around with this based on @strager's suggestions and composed the following, excellently functional code

jQuery:

$(":text[value='']").addClass('empty');
            $(":text[value>='']").removeClass('empty');
            $('.ez-edit').blur(function() {
                if ($(this).val().length >= 0) {
                    $(this).removeClass('empty');
                 } 
                 if ($(this).val().length <= 0) {
                    $(this).addClass('empty');
                 }
            });

and CSS:

 input.ez-edit {
    font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif;
    font-weight:bold;
    display: inline;
    padding:5px 8px 5px 2px;
    background-color: transparent;
    border-style: none;
    border-top: 1px solid #cdcdcd;
    color: inherit;
    font-size: inherit;
}

input.ez-edit:hover {
    text-decoration: underline;
    /* following "pencil" img from: http://enon.in/6j */
    background:url(../images/pencil.gif) no-repeat right #ffffdc; 
    border-style:1px hidden;
    border-top:1px solid #fff;
    border-right-color:#fff;
    border-bottom-color:#fff;
    border-left-color:#fff;
}

input.ez-edit:focus, input.ez-edit:focus:hover {
    display:inline-block;
    border:1px solid #4d4d4d;
    font-size:12px;
    background-color:#FFFFDc;
    color:#333;
    font-weight:normal;
}

Answer 2

Why not make a CSS style for :focus for the input, making it look like a text-box, and a CSS style otherwise which makes it look like an inline text element?

input.ez-edit {
    display: inline;
    padding: 0;
    background-color: transparent;
    border-style: none;
    color: inherit;
    font-size: inherit;
}

input.ez-edit:hover {
    text-decoration: underline;
}

input.ez-edit:focus {
    display: inline-block;
    padding: 3px;
    background-color: #FFFFFF;
    border: 1px solid #000000;
}

input.ez-edit:focus:hover {
    text-decoration: none;
}

Answer 3

I don't exactly know the function on Flickr you're referring to, but also consider not changing the input's type at all, but just its style. Much easier and doable without fiddling in the DOM. A setting like

background-color: white;
border-color: transparent;

would make a text input look like a span.

A downside to this is that a text input, different from a <span>, always has a fixed width.