How to keep some input text removed by jquery when going back with browser?

Question

I have some bug with the following page: http://jsbin.com/agedu/ Source code with some comments: http://jsbin.com/agedu/edit

The problem is that when typing something and doing the query to display search results, if I go back to the search page in my browser (Firefox 3.5 but it's the same thing with IE8) there isn't my search terms anymore.

It's replaced by grey text. This grey text that I only want to have when there isn't any filled text.

When I remove the jQuery code, if I do some search and press "go back" button on my browser the filled text is still present.

And even with this example page: http://mucur.name/system/jquery_example/

If I write some text, load some other URL in the address bar, and then press go back button, the filled text is still present, while it's not with my code.

So my question is: do you have any idea how to keep this text if filled?

There should be a way to detect if the input is filled and avoid replacing text if so.

It may come from browsers and how they deal with JavaScript but I'm not sure about it.

Answer 1

Wow, it took a long time to debug this one, I think you should use the val method instead of using the 'value' attribute.

Anyway, the problematic line is this

$(this).attr('value', hvalue).addClass(opts.hclass).unbind('focus blur').bind('focus', 

In the above line, when you assign the attribute 'value', you are actually changing the value of the text box. You should change it only if it's non empty.

I changed your code a little bit to use val() method everywhere and it works as you expected.

Working demo: http://jsbin.com/ihegu/

[Notice how the demo correctly greys out 'Wikipedia' text when you search something on Google and click on the back button.]

 (function($) { 
    $.fn.inputdynvalue = function(options) 
    { 
        var opts = $.extend({}, 
        $.fn.inputdynvalue.defaults, options); 
        return this.each(function() 
            { 
            var hvalue = opts.htext; 
            switch (opts.htext) 
            { 
                case 'title': 
                    hvalue = $(this).attr('title'); 
                    break; 
                case 'value': 
                    hvalue = $(this).val();
                    break; 
            } 

            //Modify the text value ONLY if it's non empty. 
            if($(this).val() === '')
            {
               $(this).val(hvalue);
            }  

            //If title and value is same, apply the grey text class.
            if($(this).val() === this.title)
            {
               $(this).addClass(opts.hclass);
               //Why do you unbind the event?
            };

            $(this).bind('focus', 
            function() { 
                if ($(this).val() === this.title) { 
                    $(this).val('');
                    $(this).removeClass(opts.hclass); 
                } 
            });

            $(this).bind('blur', 
            function() { 
                if ($(this).val() === '') { 
                    $(this).val(this.title);
                    $(this).addClass(opts.hclass); 
                } 
            }); 
        }); 
    }; 
    $.fn.inputdynvalue.defaults = { 
        htext: 'title', 
        hclass: 'hint' 
    }; 
})(jQuery); 
$(document).ready(function() { 
    $("input[type='text']").inputdynvalue(); 
});