CODEWITHSUNDEEP
javascriptjqueryjquery-pluginsplaceholder
samquo
samquo

Reputation: 757

Jquery plugin for this effect? and what is the effect called?

I've implemented this effect myself several times in raw jquery code, but I want to have it as a plugin. Problem is I don't know what it's called to search for the plugin. Basically, the input field has its label in pale gray inside the field itself. When the user clicks, the gray label disappears. If the user exited the field without typing anything, the gray label returns. Otherwise, whatever the user types stays there. It's really simple, does it have a name, and is there a plugin for it so I could something like

$('#blabla').effectname('Label');

Sorry if this is a stupid question but I'm really blanking out on this one.

Upvotes: 2

Views: 117

Answers (3)

swilliams
swilliams

Reputation: 48910

It sounds like you're describing a 'placeholder'. This is actually built into HTML 5, and is supported in (as of this writing) WebKit (Chrome + Safari), FireFox 3.7 and above, and IE 9 beta (I think).

Just doing a bit of searching around I found this jQuery plugin - jQuery Placeholder.

Upvotes: 6

Mitch Malone
Mitch Malone

Reputation: 892

Here is one I wrote a long time ago, I am sure it will help.

The function:

function textReplacement(input) {
    var originalvalue = input.val();
    input.focus(function() {
        if ($.trim(input.val()) == originalvalue) {
            input.val('').css("color", "#000");
        }
    });
    input.blur(function() {
        if ($.trim(input.val()) == '') {
            input.val(originalvalue).css("color", "#999");
        }
    });
}

The usage:

textReplacement($('input#thisID').css("color", "#999"));

Enjoy!

Upvotes: 2

Matt Ball
Matt Ball

Reputation: 359816

It's called a watermark or placeholder. There is a suitable jQuery plugin I've used with no complaints here. It has all sorts of good stuff (like drag-and-drop support!).

I'm sure you can find many others as well. http://www.google.com/search?q=jQuery+watermark

Upvotes: 1

Related Questions