如何回去用浏览器的时候保持的jQuery删除了一些输入文本？ [英] How to keep some input text removed by jquery when going back with browser?

问题描述

我有以下页面的一些bug： http://jsbin.com/agedu/
来源$ C ​​$ c。与一些意见： 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 code，如果我做了一些搜索和preSS回去在我的浏览器按钮填充文本仍然present。

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/

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

如果我写一些文字，加载一些其他的URL地址栏，然后preSS回去键，填写的文字仍present，虽然它不符合我的code。

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方法。

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.

我改变了你的code一点点地使用VAL（）方法中无处不在，它可以作为你的预期。

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

工作演示： 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(); 
});

这篇关于如何回去用浏览器的时候保持的jQuery删除了一些输入文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！