Defaultvalue – Gives value to empty inputs jQuery plugin
Defaultvalue is a Jquery plugin that sets a default value on your input elements if they are empty. The default value disappears if the input gain focus or the user types something in it. Perfect for label values like “Search here…”, “Username” or example values like “john.doe@corp.com”. Works with both text and password inputs as well as textareas.
How to use Defaultvalue
There are two ways of using Defaultvalue. The first one is the, according to w3c, pure one. The second one is in some cases the right way to go.
The first way
In the pure one you set the default value, the value you want to show when the input element is empty, in the javascript. For every default value you need to call the defaultValue function.
$('#inputUsername').defaultValue({'value':'Username'});
$('#inputPassword').defaultValue({'value':'Password'});
The second way
The second way of using Defaultvalue is in some cases the easiest approach, but it is not according to w3c’s recommendations. It does not validate since it makes use of the rel attribute. First off the rel attribute should be used to state a relation, secondly the input element doesn’t even have a rel attribute. But, it works… even in Internet Explorer 6.
You state the default value directly in the html using the inputs rel attribute. In the javascript you only need to call the defaultValue function once.
<input type="text" id="inputUsername" rel="Username" /> <input type="password" id="inputPassword" rel="Password" />
$('input').defaultValue();
Empty input fields has the class name ‘empty’
When the default value is shown the class name ‘empty’ is added to the field. Take a look at the demo and see how the default values differs from the user created values.
Password fields manipulate the DOM
Since you can’t change the type of an input field in Internet Explorer, Defaultvalue creates a clone of your password field but with the type text instead.
| Version | Changes |
|---|---|
| 1.3.1 | Fixed Lazy compatibility (Thanks Anders Adlén) |
| 1.3 | Refactored (Thanks Kristofer Karlsson) |
| 1.2 | Fixed an ‘addClass’ is not a function error (Thanks pentarim) |
| 1.1 | Refactored. Default values are now removed when closest form is submitted. Fixed tabindex issue. (Thanks a lot to Paul Elliott) |
Comments
Make a comment
Projects
- Accordion (jQuery)
- Airport (jQuery)
- Defaultvalue (jQuery)
- Elastic (jQuery)
- Highlight (jQuery)
- Keycan
- Lazy (jQuery)
- Limit (jQuery)
- Password Strength (jQuery)
- Show Password (jQuery)
- Tabify (jQuery)
- Valid8 (jQuery)
Latest posts
- July 8th, 2009 Why are we typing passwords twice?
- July 5th, 2009 Don’t stop password masking; let the user decide
- June 1st, 2009 You can’t validate email addresses with regular expressions
- May 20th, 2009 Konami Code: Why so verbose, when you can make it in 140 characters?
- May 18th, 2009 Let your users know if Firebug slows down your web page.
REL is illegal attribute for form elements dude..sorry :)
you can use defaultValue and just specify value=”xxx” and then check if el.value == el.defaultValue
this method is native to any browser.
just not working on textarea so mind that.
@vsync: I made an little update to please you :)
Why don’t you use the title attribute instead of rel? Wouldn’t that work AND validate?
That depends on what you are going to use defaultValue for. Title would work for ‘Username’ but not if you use Defaultvalue for showing an example value like ‘John Doe’.
[...] Defaultvalue – Gives value to empty inputs jQuery plugin | Unwrongest – Bookmark the permalink. Both comments and trackbacks are currently closed. Possibly related postsBookmarks for 23.03.2009 through 26.03.2009 [...]
[...] Defaultvalue : permet de définir une valeur par défaut à un champ de texte. Quand le champ prend le focus, la valeur par défaut disparait et ré-apparait si le champ est vide. [...]
Hi,
thanks for this script.
I do have a couple of question please:
is it possible to assign default values to several input fields in one line?
ex.: $(‘#field1, #field2, …’).defaultValue(‘Value1′, ‘Value2′, …);
As REL is not used, is it possible to remove the part that takes in charge the REL attribute to make the code lighter?
Thanks
It is possible to assign default values to several input fields in one line, but not with different values.
You can do: $(’#field1, #field2,’).defaultValue(’Value1′);
but not: $(’#field1, #field2, …’).defaultValue(’Value1′, ‘Value2′, …);
REL: Yes that is possible.
yes, i tried $(’#field1, #field2,’).defaultValue(’Value1′); and it worked but i need deferent values…
this script is great but this module is very important, do you think it’s possible to add this possibility??
it will be amazing if you can make the script lighter by taking away the code that takes in charge the REL attribute and give the possibility to assign default values to different fields…
Thanks
Oh Sorry. I wont change how defaultvalue works regarding multiple elements and multiple values, since all you need to to is making multiple calls. And for the RELs. Just remove this “$(this).attr(‘rel’);” on line 5… thats all.
Yes, i need to make multiple calls but with different values!!
you must know that this small little detail makes the diference and will make many people including me hesitating to use you plugin!!
It’s okay, you cal leave it the wat it is, i found another one and i’ll use it!
Thank you anyway.
Probably a bug, when plugin is loaded with jquery 1.3.2 it gives error “$input.val(defaultValue).addClass is not a function”
Its triggered on line 72, the fix is to replace the line with (flip addClass & val)
$input.addClass(‘empty’).val(defaultValue);
Hope it helps & tnx for plugin
Hello, thanks for ur great script !
I found a possible little bug :
When using Firefox’s ‘remember password’ feature to remember the username and pass on a page, this script will show the default value (for example “Password”) instead of showing the remembered password (as black dots). When the field is clicked, the black dots appear. If we click outside the field again, the black dots remain there (which is normal).
SO, the only anormal thing is that “Password” is shown instead of the black dots after the page loads.
Firefox version: 3.5.6
Jquery version: 1.3.2
code:
addEvent(window, ‘load’, init);
function init()
{
$(‘#username’).defaultValue(‘Username’);
$(‘#password’).defaultValue(‘Password’);
}
I noticed that we can see the black dots for a second, before the script is run. After the script, “Password” appears instead of the black dots.
I hope this info will help u improve ur script even more :)
Ramito
Another small bug :
We cannot start with a blank space… it will automatically revert to default value.
Ram
A 3rd bug found in version 1.2 (not present in version 1.0, the demonstration version)
When we start typing in the textarea, we must type at least 2 chars before the text color reverts to black (.empty class removed).
In version 1.0, the cursor becomes black directly when the textarea has focus.
Ram
IE feature.
If several inputs are in line and floated IE blinks when redraw password field.
Decision: replace “$el.hide();” and “$input.show();” in “createClone”, set show() first
Hi,
Why don’t you do it the w3c way ?
You can use “placeholder” in HTML5.
If defaultValue detect HTML5 capability of the browser. It does nothing.
Else it behaves like it already does with rel.
It is not valid in html4/xhtml either but at least it is in html5. ;)
Also if you want to use an attribute valid in Html/xhtml, you can use “alt”. :)
Hi Jan, I tried to use this plugin with jquery 1.4.2. If I pass a text for the default value, it doesn’t work. I have to pass {value: ‘text’} to have it working.
Moreover I tried to use the plugin with livequery:
$(‘.web-site-description input.test’).livequery(
function() {
$(this).defaultValue({value: ‘test’});
}
);
and I faced a problem: I use a class selector. As the input class is added to the clone, livequery loops indefinitely.
Doesn’t seem to work for me in a textarea in firefox… I see the empty class being added, but no text value.
Also, does it work with elastic?
Thanks!
Examples code does not seem to work. I am using jquery.defaultvalue.js 1.3.1 and jQuery 1.4.2. If using:
$(“#foo”).defaultValue(“Lorem ipsum.”);
defaultvalue will always be null. The following works though:
$(“#foo”).defaultValue({value : “Lorem ipsum.”});
suggest..
setTimeout(function () {
$el.blur();
$input.focus();
}, 1);
this is all the historybenazir
jQuery(function(){
$(“#submit”).click(function(event){
$(“.error”).hide();
var frstname= $(“#firstname”).val();
var hasError = false;
var passwordVal = $(“#password”).val();
var checkVal = $(“#password-check”).val();
if (passwordVal == ”) {
$(“#password”).after(‘ Please enter a password.’);
hasError = true;
} else if (checkVal == ”) {
$(“#password-check”).after(‘Please re-enter your password.’);
hasError = true;
} else if (passwordVal != checkVal ) {
$(“#password-check”).after(‘ Passwords do not match.’);
hasError = true;
}
if(hasError == true) {return false;}
if($(‘#firstname’).attr(“”) == null)
{
$(“#firstname”).after(‘please enter the First Name’);
/*alert(“Please enter the first name!”); */
return false;
}
});
$(“#commentForm”).validate();
// validate signup form on keyup and submit
});