How To Keep Some Input Text Removed By Jquery When Going Back With Browser?
I have some bug with the following page: http://jsbin.com/agedu/ Source code with some comments: http://jsbin.com/agedu/edit The problem is that when typing something and doing the
Solution 1:
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.
I changed your code a little bit to use val() method everywhere and it works as you expected.
Working demo: 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);
returnthis.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();
});
Solution 2:
When you initialize your plugin, you were setting resetting the value of the inputs, I just refactored a bit and added the following check:
if (this.value === '' || this.value === hvalue){
$(this).attr('value', hvalue).addClass(opts.hclass);
}
I separated that operations from your focus event connection chain.
Now it will only set the default value (hvalue) and the default gray class (hclass) if the element value is '' or it has the default value.
Check your snippet here.
Solution 3:
Tested in IE8 and FF
This is copied from the source and modified.
I made a ghosted text control in plain old js a while back, looking at it in jQuery makes me want to go back and rewrite it.
<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxml: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><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><styletype="text/css">.hint {
color: #C0C0C0;
}
</style><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><title>Test</title></head><body><formaction="http://www.google.com/search?&q="><divclass="saisie"><inputtype="text"id="lr_text"name="q"title="Google" /><buttontype="submit">OK</button></div><divclass="options"><labelfor="lang_en"><inputtype="radio"checked="checked"id="lang_en"name="lr"title="English Google" />English</label><labelfor="lang_fr"><inputid="lang_fr"type="radio"name="lr"title="French Google" />French</label><labelfor="lang_de"><inputid="lang_de"type="radio"name="lr"title="German Google" />German</label><labelfor="lang_es"><inputid="lang_es"type="radio"name="lr"title="Spanish Google" />Spanish</label></div></form><formmethod="post"action="http://en.wikipedia.org/wiki/Special:Search?search="><divclass="saisie"><inputtype="text"id="wikipedia_text"name="champ_wikipedia"title="Wikipedia" /><buttontype="submit">OK</button></div><divclass="options"><labelfor="wik_en"><inputtype="radio"checked="checked"name="wikipedia"id="wik_en"title="English Wikipedia" />English</label><labelfor="wik_fr"><inputtype="radio"name="wikipedia"id="wik_fr"title="French Wikipedia" />French</label><labelfor="wik_de"><inputtype="radio"name="wikipedia"id="wik_de"title="German Wikipedia" />German</label><labelfor="wik_es"><inputtype="radio"name="wikipedia"id="wik_es"title="Spanish Wikipedia" />Spanish</label></div></form><scripttype="text/javascript">
$(document).ready(function() {
functionsetText() {
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);
returnthis.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 valuehclass: 'hint'
};
})(jQuery);
$(document).ready(function() {
//Set hint
$("input[type='text']").blur();
});
</script><scripttype="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><scripttype="text/javascript">var pageTracker = _gat._getTracker("UA-1656750-13");
pageTracker._trackPageview();
</script></body></html>Solution 4:
The inputdynvalue() function explicitly forces the textbox text when called, even if the textbox is non-empty.
Fix it like so:
(function($) {
$.fn.inputdynvalue = function(options) {
var opts = $.extend({},
$.fn.inputdynvalue.defaults, options);
returnthis.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);
The key is the lines:
if (this.value === '') {
$(this).attr('value', hvalue).addClass(opts.hclass)
}
which replace the un-conditional overwrite from before.
The fixed version can be seen at http://jsbin.com/ikipi.
Post a Comment for "How To Keep Some Input Text Removed By Jquery When Going Back With Browser?"