使用浏览器返回时如何保留 jquery 删除的一些输入文本?

2022-01-11 00:00:00 input browser jquery jquery-plugins javascript

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

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

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

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.

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

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.

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

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

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.

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

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

推荐答案

哇，这个调试了好久，我觉得你应该使用val方法而不是使用'value'属性.

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

反正有问题的线是这个

$(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.

我稍微更改了您的代码以在任何地方使用 val() 方法，它可以按您的预期工作.

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

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

[请注意，当您在 Google 上搜索某些内容并单击返回按钮时，演示如何正确地使维基百科"文本变灰.]

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

相关文章