Adding prompt text to text input with jQuery
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.

Simple and cool…thx!