views:

436

answers:

3

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.

A: 

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.

Pekka
Like you said, the downside is the fixed width, which is one of the main reason I thought of the DOM switch. Also, if the text input had a lot of text, how will it act if the background is hidden. I'll give it a spin and see if this suggestion is workable in my scenario. Thanks.
eknown
A: 

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;
}
strager
Good idea. Will give it a spin. I still, however need to create a jquery function that if the input has text, onBlur it will display "saving..." for one second, an also create a placeholder to send the info to the server.
eknown
@eknown, Good point, which is perhaps a reason to put this in a Javascript-specific stylesheet.
strager
+1  A: 

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;
}
eknown