Using watermark effect in forms

I want to implement watermark effect in my html form.

I have my code like this http://jsfiddle.net/aMjT4/1/

I want to set particular value to all my textboxes. Like in my textbox field

   <input type="text" id="firstName" name="firstName" value="Enter First Name" class="inputTextboxId"/>

I want to set watermark text from value.(value="Enter First Name").

My javascript look like this but it will set watermark text into all my form fields.

 $(document).ready(function () {
        var watermar开发者_Python百科k = 'Enter something...';
        $('.inputTextboxId').blur(function () {
            if ($(this).val().length == 0)
                $(this).val(watermark).addClass('watermark');
        }).focus(function () {
            if ($(this).val() == watermark)
                $(this).val('').removeClass('watermark');
        }).val(watermark).addClass('watermark');
    });

How can i set value text to all my textboxes?

I have this code but in this code i have to write this for all textboxes. is there any way to generlize this?

<input type="text" id="city" name="city" value="Enter Your City" class="inputTextboxId" onblur="if (this.value == '') { this.value = 'Enter Country City';this.style.color = 'Gray'; }" maxlength="255" onfocus="if(this.value == this.defaultValue){this.value='';this.style.color='Black'}"/>

This is the hard way. You want to just either write a plugin or grab one that is readily available.

http://plugins.jquery.com/project/TinyWatermark

http://plugins.jquery.com/plugin-tags/watermark

Here's one I wrote

this is the js file code;

(function ($) {
    $.fn.extend({
        watermark: function () {
            return this.each(function () {
                var $obj = $(this);

                $obj.val($obj.attr("watermarkText"));

                $obj.focus(function (e) {
                    if ($obj.val() == $obj.attr("watermarkText"))
                        $obj.val("");
                });

                $obj.blur(function (e) {
                    if ($obj.val() == "")
                        $obj.val($obj.attr("watermarkText"));
                });

            });
        }
    });
})(jQuery);

and then in your html;

 <script>
        $(function () {
            $(".watermark").watermark();
</script>

<input id="author" value="" type="text" name="author" watermarkText="Your name..." class="watermark required">