Adding prompt text to text input with jQuery

Posted on August 9, 2009, 11:46 pm, under Javascript.

A small plugin I made to show helper text for form text inputs. I’m sure there are tons of these going around the web already. Just learning from the basics.

I believe I made this as easy as possible. Well this requires jQuery color plugin but implementation is pretty straight forward.

1

$("input[name=single]").prompt("some prompt text");

Or you can just point whole text inputs and specify prompt text and its color.

1
2
3

$("input[type=text]").prompt({ 
                        text:"some placeholder text", 
                        color:"#FF0000"});

And full code here.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

(function (jQuery) {
    jQuery.fn.extend({
        prompt: function (option) {
            var defaultText;
            if ((typeof option) == "string") defaultText = option;
            else if (option && option.text) defaultText = option.text;
            else return;
 
            var promptColor = (option && option.color) ? option.color : "#999999";
 
            var array = [];
            this.each(function () {
                var $input = jQuery(this);
                if (!$input.is(":input") || $input.attr("type") != "text") return;
 
                var normalColor = $input.css("color");
                var backgroundColor = $input.css("background-color");
 
                $input.focus(function () {
                    if (jQuery.trim($input.val()) == defaultText) {
                        $input.css({
                            color: normalColor
                        }).val("");
                    }
                }).blur(function () {
                    if (jQuery.trim($input.val()) == "") {
                        $input.css({
                            color: backgroundColor
                        }).val(defaultText).animate({
                            color: promptColor
                        });
                    }
                });
 
                var value = $j.trim($input.val());
                if (value == "" || value == defaultText) {
                    $input.css({
                        color: promptColor
                    }).val(defaultText);
                }
 
                array[array.length] = this;
            });
 
            return array;
        }
    });
})(jQuery);

You can check out working sample here.

Tags:
Comment (RSS)  |  Trackback

4 Comments

  1. Jimmy says:
    April 17, 2010 at 9:51 am

    Simple and cool…thx!

  2. Jermaine Atkinson says:
    December 24, 2010 at 10:23 am

    %BLOFTITLE% is a well put together blog. I dont think my website http://timetoshine.com.au has much in common with yours, though I can (and have) learnt a lot from you, cheers, Jermaine Atkinson

  3. what is retinitis pigmentosa says:
    March 22, 2011 at 10:16 am

    hello there and thank you for your info ? I’ve certainly picked up something new from right here. I did however expertise some technical issues using this site, since I experienced to reload the website many times previous to I could get it to load correctly. I had been wondering if your hosting is OK? Not that I’m complaining, but sluggish loading instances times will sometimes affect your placement in google and can damage your quality score if ads and marketing with Adwords. Anyway I am adding this RSS to my email and could look out for a lot more of your respective exciting content. Make sure you update this again soon..

  4. ett says:
    March 27, 2011 at 9:20 pm

    Nice Plugin!
    Works as expected.
    Good Job!

Leave a Reply

«
»