我有以下页面的一些bug： http://jsbin.com/agedu/源代码的一些意见： http://jsbin.com/agedu/edit
问题是，在打字的时候的东西，做查询显示搜索结果，如果我回到搜索页面在我的浏览器（Firefox 3.5，但它与IE8同样的事情）没有我的搜索词了。
它是由灰色文本替换。 这灰色的文字，我只想有当没有任何填充文本。
当我删除了jQuery的代码，如果我做了一些搜索和按“返回”按钮，在我的浏览器填充文本仍然存在。
甚至与此示例页面： http://mucur.name/system/jquery_example/
如果我写一些文字，加载在地址栏中输入一些其他的URL，然后按返回键，填充的文本仍然存在，虽然这不是我的代码。
所以我的问题是：你有什么想法如何保持这个文本，如果填写？
应该有检测如果输入填充，避免如果是替换文本的方式。
它可能来自浏览器，以及他们如何处理JavaScript，但我不知道这件事。
哇，花了很长的时间来调试这一块，我认为你应该使用的，而不是使用“价值”属性VAL方法。
无论如何，问题的行是这样的
$(this).attr('value', hvalue).addClass(opts.hclass).unbind('focus blur').bind('focus',
在上面的线，当你分配属性“价值”，实际上是改变文本框的值。 你应该改变它，只有当它是一个非空。
我改变你的代码一点点到处使用VAL（）方法和它的作品如你预期。
工作演示： http://jsbin.com/ihegu/
[注意如何正确地演示了为灰色“维基百科”的文字，当你搜索在谷歌的东西，然后单击后退按钮。]
(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();
});
当你初始化你的插件，你重新设置的输入值，我只是一个重构位和增加了以下检查：
if (this.value === '' || this.value === hvalue){
$(this).attr('value', hvalue).addClass(opts.hclass);
}
我分开你的焦点事件连接链中的操作。
现在，如果元素的值是它只会设置默认值（hvalue）和默认的灰色类（hclass） ''或具有缺省值 。
检查你的代码片段在这里 。
经测试，在IE8和FF
这是从源复制和修改。
我在做普通的旧的JS影文本控制而回，在jQuery的看着这让我想回去重写。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<!--
Created using http://jsbin.com
Source can be edited via http://jsbin.com/oxeye/edit
-->
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
.hint {
color: #C0C0C0;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<body>
<form action="http://www.google.com/search?&q=">
<div class="saisie">
<input type="text" id="lr_text" name="q" title="Google" />
<button type="submit">OK</button>
</div>
<div class="options">
<label for="lang_en"><input type="radio" checked="checked" id="lang_en" name="lr" title="English Google" />English</label>
<label for="lang_fr"><input id="lang_fr" type="radio" name="lr" title="French Google" />French</label>
<label for="lang_de"><input id="lang_de" type="radio" name="lr" title="German Google" />German</label>
<label for="lang_es"><input id="lang_es" type="radio" name="lr" title="Spanish Google" />Spanish</label>
</div>
</form>
<form method="post" action="http://en.wikipedia.org/wiki/Special:Search?search=">
<div class="saisie">
<input type="text" id="wikipedia_text" name="champ_wikipedia" title="Wikipedia" />
<button type="submit">OK</button>
</div>
<div class="options">
<label for="wik_en"><input type="radio" checked="checked" name="wikipedia" id="wik_en" title="English Wikipedia" />English</label>
<label for="wik_fr"><input type="radio" name="wikipedia" id="wik_fr" title="French Wikipedia" />French</label>
<label for="wik_de"><input type="radio" name="wikipedia" id="wik_de" title="German Wikipedia" />German</label>
<label for="wik_es"><input type="radio" name="wikipedia" id="wik_es" title="Spanish Wikipedia" />Spanish</label>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
function setText() {
var kf = this.title.split('|');
if (kf.length < 0) return;
if ($('#' + this.name + '_text').hasClass('hint')) {
$('#' + this.name + '_text').val(kf[0]).addClass('hint');
}
$('#' + this.name + '_text').attr('title', kf[0]);
}
$("input[type='text']").inputdynvalue();
$("input[type='radio']").click(setText);
});
(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).attr('value');
break;
}
//if value == title change class to 'hint'
if ($(this).attr('value') == $(this).attr('title')) {
$(this).addClass(opts.hclass);
}
$(this).attr('value', hvalue).unbind('focus blur').bind('focus',
function() {
if (this.value === this.title) {
this.value = '';
$(this).removeClass(opts.hclass);
}
}).bind('blur',
function() {
if (this.value === '') {
this.value = this.title;
$(this).addClass(opts.hclass);
}
});
});
};
$.fn.inputdynvalue.defaults = {
htext: 'value', //changed to value
hclass: 'hint'
};
})(jQuery);
$(document).ready(function() {
//Set hint
$("input[type='text']").blur();
});
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-1656750-13");
pageTracker._trackPageview();
</script></body></html>
该inputdynvalue（）函数明确强制文本框的文本时调用，即使文本框非空。
修复它就像这样：
(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).attr('value');
break;
}
if (this.value === '') {
$(this).attr('value', hvalue).addClass(opts.hclass)
}
$(this).unbind('focus blur').bind('focus',
function() {
if (this.value === this.title) {
this.value = '';
$(this).removeClass(opts.hclass);
}
}).bind('blur',
function() {
if (this.value === '') {
this.value = this.title;
$(this).addClass(opts.hclass);
}
});
});
};
$.fn.inputdynvalue.defaults = {
htext: 'title',
hclass: 'hint'
};
})(jQuery);
关键是线：
if (this.value === '') {
$(this).attr('value', hvalue).addClass(opts.hclass)
}
从之前更换未覆盖的条件。
固定的版本可以看出http://jsbin.com/ikipi 。
