TextBox Watermark in ASP.NET MVC

Question

What an easy way to implement watermark text field management in ASP.NET MVC, are there any such controls on the Internet (possibly code). I suppose it's pretty simple to write one extensible HtmlHelper and use a text block implementation using jQuery.

Answer 1

You can use the jQuery plugin as shown below:

Watermark plugin

There is a sample and is easy to use.

Answer 2

I would use this: http://digitalbush.com/projects/watermark-input-plugin/

Answer 3

TypedTextBox Mvc Controls : http://mvccontrolstoolkit.codeplex.com/wikipage?title=TypedTextBox

Answer 4

ClearField jQuery: http://labs.thesedays.com/projects/jquery/clearfield/

, ( ):

HTML-:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.clearfield.js"></script>

- :

$(document).ready(function() {
    $('.clearField').clearField();
});

:

<input type="text" class="clearField" value="What your name?" /> 

ASP.NET( MVC), , , ASP- :

<asp:TextBox ID="Search" runat="server" CssClass="clearField">Search Something</asp:TextBox>

, : " - ", , script:

<script type="text/javascript">
    $(document).ready(function () {
        $('.clearField').clearField();
    });
</script>

Answer 5

with this jquery you can show the watermark in the text box. Here I use an image instead of a watermark. You need to create a watermark text image.

$(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");
                }
            });
}

Answer 6

Perhaps you can use the AJAX Control Tookkit Watermark .