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:
HTML Code:
<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
:
HTML Code:
<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:
HTML Code:
<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.
Linear Mode
