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

One Comment

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

    Simple and cool…thx!

Leave a Reply

«
»