Web Hosting Talk






PDA

View Full Version : HTML input fields with default values using jQuery

j.vihavainen
10-03-2011, 12:10 PM
Designers often choose to compact their designs by putting input field labels in to the input boxes themselves. It is our jobs as developers then to make the default label text disappear when a user clicks or focuses on the input box. jQuery makes this super simple. All it takes is a few lines of javascript and a special class name for your input fields.

The HTML:

<input type="text" name="email" value="Email" class="jsClearDefault" />
<input type="password" name="password" value="Password" class="jsClearDefault" />
<input type="submit" name="action" value="Login" />

The Javascript:

<script type="text/javascript">

$('.jsClearDefault').each(function(i){
var defaultValue = $(this).val();

$(this).focus(function(){
if($(this).val() == defaultValue)
{
$(this).val('');
}
});

$(this).blur(function(){
if($(this).val().length == 0)
{
$(this).val(defaultValue);
}
});
});

</script>

All you have to do to get this working on your page is paste the Javascript block right before your </body> tag and give your input fields the jsClearDefault class. You also need to have jQuery loaded on your page within the <head> of your document. You can load it directly from Google using:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

I have hosted a sample of this script in action HERE (http://dev.strategystar.net/examples/html-input-fields-with-default-values-using-jquery.html).
HostGrenade
10-05-2011, 03:32 PM
Nice, but the one for the password is unneeded. Changing the input type doesn't work either.


<input type="password" name="password" style="display:hidden" value=""/>
<input type="text" name="pass" value="Password" class="jsClearDefault"/>


Than, the jQuery code


$('.jsClearDefault').focus(function(){
var value = $(this).val();
if($(this).attr('type') == 'text' && $(this).attr('name') == 'pass'){
$(this).hide().prev().show().focus();
}.blur(function(){
if($(this).attr('name') == 'password' && $(this).attr('type') == 'password')){
$(this).hide().next().val(value).show();
}
})
})


Of course, when the form is sent, you'll have to disregard the input[name="pass"], also this does not take into account the jQuery code from before. Code should work
j.vihavainen
01-10-2012, 01:38 PM
HostGator,

Naturally people have different requirements and preferences, but I don't think there is anything wrong in my code sample. I have the same script deployed on production with a couple different websites. It also works in the sample link that I posted.

Nice, but the one for the password is unneeded.

Why is it unneeded?
HostGrenade
01-12-2012, 05:59 PM
Wrong company but close/

Having a default value of "Password" for a password input will result in a whole bunch of bullets, which is pointless.

Mine will show "Password" and on focus will switch to the actual password input.
8088
01-12-2012, 06:23 PM
Having a default value of "Password" for a password input will result in a whole bunch of bullets, which is pointless.
People usually associate bullets with a password field. Changing from visible text to bullets is rather confusing and non-intuitive.
Mine will show "Password" and on focus will switch to the actual password input.
Not if JavaScript is turned off. And it will also prevent browsers from offering the user to remember the password.

Still, using default values is pointless in my opinion. I'd rather use HTML labels. Nice tutorial though, j.vihavainen.
j.vihavainen
01-17-2012, 02:36 PM
Still, using default values is pointless in my opinion. I'd rather use HTML labels. Nice tutorial though, j.vihavainen.

I agree that default values as labels is not the best way to go, but sometimes you can't bend the specs to your will. :)