CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-3asp.net-mvc-2
user1030181
user1030181

Reputation: 2015

WaterMark TextBox in MVC Framework

How can I create a watermark on an HTML textbox? This is an MVC3 web application.

Upvotes: 1

Views: 2549

Answers (3)

Lee
Lee

Reputation: 665

With this jquery you can show watermark on your text box .Here I am using an image in place of watermark.You need to create an image of the watermark text.

$(document).ready(function () {

            /*Watermark for date fields*/

             if ($("#dob").val() == "") {
                $("#dob").css("background", "#ebebeb url('/Content/images/DateWaterMark.png') no-repeat 1px 0px");
            }

            $("#dob").focus(function () {
                if (watermark == 'MM/DD/YYYY') {
                    $("#dob").css("background-image", "none");
                    $("#dob").css("background-color", "#fff");
                }
            }).blur(function () {
                if (this.value == "") {
                    $("#dob").css("background", "#ebebeb url('/Content/images/DateWaterMark.png') no-repeat 1px 0px");
                }
            });

            $("#dob").change(function () {
                if (this.value.length > 0) {
                    $("#dob").css("background", "#fff");
                }
            });
}

Upvotes: 0

Charles Ouellet
Charles Ouellet

Reputation: 6518

If you can use HTML5, you can try the new placeholder attribute

@Html.TextBoxFor(x => x.Field, new { placeholder = "Watermark here" })

It's pure HTML equivalent:

<input type="text" name="Field" id="Field" placeholder="Watermark here" />

Upvotes: 6

kprobst
kprobst

Reputation: 16651

Not specifically for MVC (this is script anyway), but since you're probably using jQuery in your MVC app anyway, you can use a JQuery plugin, like Watermark.

Upvotes: 2

Related Questions