Search code examples
htmlasp.net-mvcrazorwatermark

Watermark Html.TextBox in ASP.NET MVC4


I am using mvc4 framework i need to water mark @Html.TextBox("Name"). How to do this. Could you please place the latest method?


Solution

  • I have got it another way,

    An email input field and css watermark class.

    <style type="text/css">
        input.watermark { color: #999; } //light silver color
    </style>
    
    <label>Email : </lable>
    <input id="email" type="text" />
    

    jQuery to apply the watermark effect on email field.

    $(document).ready(function() {
    
        var watermark = 'Puts your email address';
    
        //init, set watermark text and class
        $('#email').val(watermark).addClass('watermark');
    
        //if blur and no value inside, set watermark text and class again.
        $('#email').blur(function(){
            if ($(this).val().length == 0){
                $(this).val(watermark).addClass('watermark');
            }
        });
    
        //if focus and text is watermrk, set it to empty and remove the watermark class
        $('#email').focus(function(){
            if ($(this).val() == watermark){
                $(this).val('').removeClass('watermark');
            }
        });
    });