What does it do?
ToggleVal is a plugin for jQuery… the most smokin' hot JavaScript Library available. Simply put, ToggleVal will wipe out the default text of a form input (type="text" and type="password" only) or textarea when it receives focus. If the field is left blank when focus is lost, the field's default text will be restored. See below for some examples!
Advertisement
How do I use it?
First thing, you need to download jQuery. Then, you'll need to grab a copy of the ToggleVal plugin. Next, you need to include both files in your page, like this:
<html>
<head>
<title>My Page</title>
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery.toggleval.js"></script>
</head>
<body>
...
</body>
</html>
After that, you simply writer your JavaScript functions/code as normal. See the examples below to learn how to use ToggleVal on your form fields.
Examples please?
Example 1: Clear default value
$(document).ready(function() {
$("#search").toggleVal();
});
Example 2: Clear default value and add class of "active" while focused
$(document).ready(function() {
$("#username, #password").toggleVal("active");
});
Example 3: Assign default class of "special" to field and add class of "active" while focused
$(document).ready(function() {
$("#email").addClass("special").toggleVal("active");
});
Example 4: Get textareas? Not a problem!
$(document).ready(function() {
$("#comments").toggleVal();
});
Advertisement
Download ToggleVal
Download the plugin and get crackin'!
Issues?
If you're having problems with ToggleVal, please report them through its jQuery project page.