Insert default value if input-text is deleted

Question

Hi all

I have the following piece of jQuery code:

$(".SearchForm input:text").each(function(){        
    /* Sets the current value as the defaultvalue attribute */
    if(allowedDefaults.indexOf($(this).val()) > 0 || $(this).val() == "")
    {
        $(this).attr("defaultvalue", $(this).val());
        $(this).css("color","#9d9d9d");


        /* Onfocus, if default value clear the field */
        $(this).focus(function(){               
            if($(this).val() == $(this).attr("defaultvalue"))
            {
                $(this).val("");
                $(this).css("color","#4c4c4c");
            }
        });

        /* Onblur, if empty, insert defaultvalue */
        $(this).blur(function(){
            alert("ud");

            if($(this).val() == "")
            {   
                $(this).val($(this).attr("defaultvalue"));                  
                $(this).css("color","#9d9d9d");
            }else
            {
                $(this).removeClass("ignore");

            }   
        }); 

    }

});

I use this code to insert some default text into some of my input fields, when nothing else is typed in. This means that when a user sees my search-form, the defaultvalues will be set as an attribute on the input-field, and this will be the value that is shown. When a user clicks inside of the input field, the default value will be removed.

When the user sees an input field at first is looks like this:

<input type="text" value="" defaultvalue="From" />

This works just fine, but I have a big challenge. If a user have posted the form, and something is entered into one of the fields, then I can't show the default value in the field, if the user deletes the text from the input field. This is happening because the value of the text-field is still containing something, even when the user deletes the content. So my problem is how to show the default value when the form is submitted, and the user then removes the typed in content?

When the form is submitted the input looks like this, and keeps looking like this until the form is submitted again:

<input type="text" value="someValue" defaultvalue="From" />

So I need to show the default value in the input-field right after the user have deleted the content in the field, and removed the focus from the field.

Does everyone understand what my problem is? Otherwise just ask, I have struggled with this one for quite some times now, so any help will be greatly appreciated.

Thanks in advance, Kim Andersen

Answer 1

Bump...

I'm really sorry for the bump, but does anyone have a clue about this issue.

Answer 2

(Disclaimer: This is not an answer, but the comment field is probably too small for my questions and remarks and I'd like to use markup.)

• What is allowedDefaults in your code?
• It's usually not a good idea to make up your own attributes in HTML.
• What is the difference (if there is one) between what you want and the usual placeholder scripts?
• HTML 5 has a placeholder attribute that may be of interest. Only few browsers suppprt it, but i would probably be a better attribute choice and with use of scripts such as Modernizr add a script if not. (http://www.modernizr.com/)

Answer 3

I think I do something like what you are looking for on our search field. Here is the script for the functionality that shows Search until the box has focus, when it loses focus and the field is still blank I put search back in there.

$('#nav-search-box').addClass("idleField").focus(function() {
$(this).removeClass("idleField").addClass("focusField");
if (this.value == this.defaultValue) {
this.value = '';
}
if (this.value != this.defaultValue) {
this.select();
}
}).blur(function() {
$(this).removeClass("focusField").addClass("idleField");
if ($.trim(this.value) == '') {
this.value = (this.defaultValue ? this.defaultValue : '');
}
}).keypress(function(e) {
if (e.which == 13) {
window.location = "/search/" + $(this).val();
}
}); 

If you want to remove the field text on posts then just disable the form post and add a button click handler or something similar.

function disableFormPost()
{
    $("#formid").submit(function() { return false });
} 

Answer 4

You are assigning the defaultvalue attribute to whatever the current value is in lines 3-5 of your code. The comment on line 2 is even telling you what you are doing.

/* Sets the current value as the defaultvalue attribute */
if(allowedDefaults.indexOf($(this).val()) > 0 || $(this).val() == "")
{
    $(this).attr("defaultvalue", $(this).val());

The problem is that you are entering this block even if the current value of the input is blank (""). When that happens, you update the defaultValue to be blank. Try commenting that assignment out or maybe even just get rid of that outermost if statement all together. I would also suggest using a class to change the color of the text for your focused input field. Or just use the :focus pseudo-class in your css.

// in your css
.SearchForm input { color: #9d9d9d; }
.SearchForm input.focused,
.SearchForm input:focus { #4c4c4c; }


$(".SearchForm input:text")
    //.unbind('focus').unbind('blur') // uncomment if playing in the console
    .focus(function () {
        var $this = $(this);
        if ($this.val() == $this.attr("defaultvalue")) 
        {
            $this.val("")
                 //.addClass('focused');
        }
    })
    .blur(function () {
        var $this = $(this);
        if ($this.val().trim() == "") 
        {
            $this.val($this.attr("defaultvalue"));
        }
        //$this.removeClass('focused');
    });

Note: :focus is not going to work for IE < 8 and I think IE6 has a hard time figuring out what to do with more than one class. So if you are trying to stay IE6 friendly stick with adding and removing the css color directly in your code.