A jQuery Plugin: Default Values for Input Fields

One of the best ways to write code that you tend to have to re-use is to put it in the public domain. That way when you need it again, it's a Google search away from your own blog.

This is a rather simple working example of default text on an input field. Click on the field, the text disappears, only to reappear if the user clicks somewhere else on the page without typing. The input also has a special class signifying that it is empty, so you can style the empty input.


JavaScript Code

(function($) {

        input_default: function(default_text, opts) {
            if (typeof default_text !== 'string') {
                opts = default_text;
            } else if (!opts) {
                opts = {
                    'default_text': default_text
            } else {
                $.extend(opts, {'default_text': default_text});
            var defaults = {
                'default_text': 'Type here...',
                'class_name': 'empty-input'
            var options = $.extend({}, defaults, opts);

            return this.each(function () {
                var $this = $(this);

                if ($this.val() == '' 
                    || $this.val() == options['default_text']) {    
                $this.bind('focus', function() {
                    if ($this.val() == options['default_text']) {
                    } else {
                }).bind('blur', function() {
                    if ($.trim($this.val()) == '') {
                    } else {



First, the HTML you can use:

<label for="default-text" class="default-text-label">
    Here is a text box: 
    <input type="text" id="default-text" class="default-text" />

You can call input_default with no arguments and get the defaults:


Specify an optional string or class:

$('.text').input_default('Enter text here...', {'class_name': 'empty'});

Here is some sample CSS to use:

.default-text {
    border: 1px solid #C0C0C0;
    padding: 2px;
    font-weight: bold;
    font-size: 14px;

.empty-input {
    color: #A0A0A0;

.default-text-label {
    font-size: 16px;
    font-weight: bold;
    color: #303030;