jQuery Plugin: autoclear

This jQuery plugin is the best way of applying default text to text input fields.

.autoclear();
.autoclear(defaultClass);
.autoclear(settingsObject);

defaultClass is a string that is used as the class name when the input field is showing the "default" value. If this is omitted, it will apply the "default" class.

settingsObject is a map that defines and overrides the various settings of autoclear. Valid values are shown below.


1. Installation

<script src="/js/jquery.autoclear.js"></script>
<style>
  .default {
    color:gray;
  }
</style>

2. Setup text fields

<form method="post">
  <label for="name">Name:</label><input type="text" id="name" name="name" title="John Smith" value="<?php echo $_POST['name']; ?>" class="autoclear"/>
  <label for="email">Email:</label><input type="text" id="email" name="email" title="your@yourdomain.com" value="<?php echo $_POST['email']; ?>" class="autoclear"/>
  <label for="about">About:</label><textarea id="about" name="about" title="Tell us a little bit about yourself..." class="autoclear"><?php echo $_POST['about']; ?>
  <input type="submit" value="Submit"/><input type="reset" value="Reset"/>
</form>

You can also put the default text in the value attribute

3. Call autoclear

$(document).ready(function () {
  $('.autoclear').autoclear();
});

4. Finished!




Setting Type Default Definition
defaultClassStringdefaultThe class applied when the input field is showing the "default" text
otherClassStringotherThe class applied when the input field is showing something other than the "default" text
defaultValueString   The value used as the "default" text. This value is only used if both the title and value attributes of the input field are undefined
useDefaultOnResetBooleantrueIf the input field was in the form <input type="text" title="Name" value="Amy"/>, if the form is reset should the value be set to "Name" (true) or "Amy" (false).
clearDefaultOnSubmitBooleantrueWhen the form is submitted, if the value of the input field is the default value, should it be cleared to '' before it is sent to the server?

Download the code now