Jquery textbox hinter is plugin which allows to add hints to textboxes and textareas. Acts as a complete replacement for labels.

Download

  • Features
  • Demo
  • Documentation
  • Download

Features

  • Simple and light-weight.
  • No knowledge of programming required.
  • Can add classes to default text.
  • Can add hints to multiple to textboxes and textareas.
  • Cross browser supported.
  • Customziable.
  • Multiple browsers support

Donate and Support with PayPal

If you find my products useful, then just donate and support my work. It will be an encouragement !

$

Demo

Click the button below to check out the demo

Demo

Download

Click the button below to download the plugin.

Download

Basic Usage

You can attach this plugin to multiple textboxes and textareas using this code

$('class / Id of the textbox/textarea').tbHinter({
	text: 'Default text goes here ...',
	styleClass: 'Class for default text goes here ...'
});

Steps in Using

  1. Download the jquery.textbox-hinter-1.0.zip file.
  2. Upload the extracted folder to your server.
  3. Include Jquery in your document 
    <script src="path to jquery" language="javascript" type="text/javascript"></script>
  4. Include textbox hinter to your document like, 
    <script src="path to jquery.textbox-hinter.js" language="javascript" type="text/javascript"></script>
  5. Attach the plugin to textboxes and teaxareas by using the code 
    $('class / Id of the textbox/textarea').tbHinter({
	text: 'Default text goes here ...',
	styleClass: 'Class for default text goes here ...'
});
  6. That’s all !
Note: The property class (as of version 1.0) is now renamed to styleClass (in version 1.1) to fix the IE 8 bug.

  • Pingback: Ocultar texto en inputs con jQuery | Kabytes

  • http://www.ndscardsale.com/ NDS Lite Console

    great post

  • http://rozwell.org rozwell

    It’s the simplest plugin I have ever met and works like a charm. Good job!

  • http://rozwell.org rozwell

    I found a little bug which sends hinters default text on submit.
    To avoid this, you should change input name with adding prefix:

    (function($){
    $.fn.tbHinter = function(options) {

    var defaults = {
    text: ‘Enter a text …’,
    class: ”
    };

    var options = $.extend(defaults, options);

    return this.each(function(){

    var originalName = $(this).attr(‘name’);

    $(this).focus(function(){
    if($(this).val() == options.text){
    $(this).val(”)
    .attr(‘name’, originalName)
    .removeClass(options.class);
    }
    });

    $(this).blur(function(){
    if($(this).val() == ”){
    $(this).val(options.text)
    .attr(‘name’, ‘hinter_’+originalName)
    .addClass(options.class);
    }
    });

    $(this).blur();

    });
    };
    })(jQuery);

  • Pingback: jQuery Roundup: Orbit, ImageSwitch and Textbox Hinter | Digital Results

  • http://www.crotouristguide.com Igor Beslic

    Hi,
    It could be good idea to replace property name “class” to something what is not js reserved word by ECMA (ieg. with styleClass). This way in IE8 and IE9 plugin makes mess to other javascript code.

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Never remembered ECMA. Sure this will be changed in the next version.

  • http://twitter.com/artfulbits Oleksandr Kucherenko

    How to fix plugin under IE? I got javascript error all the time

    • Beebs93

      Same here – plus doesn’t work in Safari (even your demo page)

  • Christian

    Would be good if one could reset or change the hint for a control.

    I’ll post the fix soon.

  • Pingback: JQuery Textbox Hinter Plugin | jQuery Wisdom

  • Nicholas_canadac

    add something

  • Mits_ac2205

    nice … :)

  • mitesh

    wrost plugin!!!!  i need to define each element id to give it text hint with text in js!!!! bhai akash please remove this one………

  • Pingback: Web Design Software

  • Vini Martins

    can you make this work for password input types?

    • http://www.aakashweb.com/ Aakash Chakravarthy

      It will not work now, but the Idea seems to be good … ill constantly work on this …

  • Pingback: jQuery textbox hinter in IE8 | Robert Reiz

  • Pingback: add/remove div « jQuery Italia - Forum