問(wèn)題描述
我對(duì)以下頁(yè)面有一些錯(cuò)誤: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
問(wèn)題是，當(dāng)輸入內(nèi)容并執(zhí)行查詢(xún)以顯示搜索結(jié)果時(shí)，如果我返回瀏覽器中的搜索頁(yè)面(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.
它被灰色文本取代.當(dāng)沒(méi)有任何填充文本時(shí)，我只想擁有這個(gè)灰色文本.
It's replaced by grey text. This grey text that I only want to have when there isn't any filled text.
當(dāng)我刪除 jQuery 代碼時(shí)，如果我進(jìn)行一些搜索并按下瀏覽器上的返回"按鈕，填充的文本仍然存在.
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.
即使有這個(gè)示例頁(yè)面:http://mucur.name/system/jquery_example/
如果我寫(xiě)一些文本，在地址欄中加載一些其他 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.
所以我的問(wèn)題是:你知道如果填寫(xiě)了這個(gè)文本如何保留嗎?
So my question is: do you have any idea how to keep this text if filled?
應(yīng)該有一種方法可以檢測(cè)輸入是否已填充，如果是則避免替換文本.
There should be a way to detect if the input is filled and avoid replacing text if so.
它可能來(lái)自瀏覽器以及它們?nèi)绾翁幚?JavaScript，但我不確定.
It may come from browsers and how they deal with JavaScript but I'm not sure about it.
推薦答案
哇，這個(gè)調(diào)試了好久，我覺(jué)得你應(yīng)該使用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.
反正有問(wèn)題的線是這個(gè)
$(this).attr('value', hvalue).addClass(opts.hclass).unbind('focus blur').bind('focus',
在上述行中，當(dāng)您分配屬性值"時(shí)，實(shí)際上是在更改文本框的值.僅當(dāng)它不為空時(shí)才應(yīng)更改它.
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() 方法，它可以按您的預(yù)期工作.
I changed your code a little bit to use val() method everywhere and it works as you expected.
工作演示:http://jsbin.com/ihegu/
[請(qǐng)注意，當(dāng)您在 Google 上搜索某些內(nèi)容并單擊返回按鈕時(shí)，演示如何正確地使維基百科"文本變灰.]
[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();
});
這篇關(guān)于使用瀏覽器返回時(shí)如何保留 jquery 刪除的一些輸入文本?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！