javascript - 返回浏览器时如何保留 jquery 删除的一些输入文本？

Question

以下页面存在一些错误:http://jsbin.com/agedu/带有一些注释的源代码:http://jsbin.com/agedu/edit

问题是，当我输入内容并执行查询以显示搜索结果时，如果我返回浏览器中的搜索页面(Firefox 3.5，但它与 IE8 相同)，则不再有我的搜索词。

它被灰色文本取代。当没有任何填充文本时，我只想拥有这个灰色文本。

当我删除 jQuery 代码时，如果我进行一些搜索并按浏览器上的“返回”按钮，填充的文本仍然存在。

即使是这个示例页面:http://mucur.name/system/jquery_example/

如果我写一些文本，在地址栏中加载一些其他 URL，然后按返回按钮，填充的文本仍然存在，但它不在我的代码中。

所以我的问题是:您知道如何在填充后保留此文本吗？

应该有一种方法来检测输入是否已填充，如果是，则避免替换文本。

它可能来自浏览器以及它们如何处理 JavaScript，但我不确定。

Answer 1

哇，调试这个花了很长时间，我认为你应该使用 val 方法而不是使用 'value' 属性。

无论如何，有问题的行是这个

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

在上面的行中，当您分配属性“value”时，您实际上是在更改文本框的值。仅当它不为空时才应更改它。

我稍微更改了您的代码以在所有地方使用 val() 方法，它按您的预期工作。

工作演示:http://jsbin.com/ihegu/

[注意当您在 Google 上搜索内容并点击后退按钮时，该演示如何正确地将“Wikipedia”文本变灰。]

 (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(); 
});