Home/ Questions/Q 7830173
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T11:06:37+00:00

i am trying to use watermark for the asp.net textbox control with jquery and

  • 0

i am trying to use watermark for the asp.net textbox control with jquery and below is the code i have, i see the title on my textarea textbox but when i focus or click on the textbox the watermark does not clear.

i got the script from here. http://www.ajaxblender.com/howto-add-hints-form-auto-focus-using-javascript.html

<asp:TextBox runat="server" ID="txtNew" class="auto-hint" title="Enter here ..." 
TextMode="MultiLine" Rows="7" Width="100%"></asp:TextBox>


<script type="text/javascript">
    $(document).ready(function () {
        // Focus auto-focus fields 
       $('.auto-focus:first').focus();

        // Initialize auto-hint fields 
        $('INPUT.auto-hint, TEXTAREA.auto-hint').focus(function () {
            if ($(this).val() == $(this).attr('title')) {
                $(this).val('');
                $(this).removeClass('auto-hint');
            }
        });

        $('INPUT.auto-hint, TEXTAREA.auto-hint').blur(function () {
            if ($(this).val() == '' && $(this).attr('title') != '') {
                $(this).val($(this).attr('title'));
                $(this).addClass('auto-hint');
            }
        });

        $('INPUT.auto-hint, TEXTAREA.auto-hint').each(function () {
            if ($(this).attr('title') == '') { return; }
            if ($(this).val() == '') { $(this).val($(this).attr('title')); }
            else { $(this).removeClass('auto-hint'); }
        });

    }); 
</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    if you are just using the idea of watermark there are many alternatives and a lot easier way to achieve it

    1) you can try using http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/TextBoxWatermark/TextBoxWatermark.aspx

    2) in the HTML5 there is a new attribute for input text called placeholder that will do exactly what you want.

    3) you can use more advanced jquery plugin like this it a lot easier to setup and not requires to much effort
    http://code.google.com/p/jquery-watermark/

    here are couple more

    http://wiki.jqueryui.com/w/page/12138131/Watermark

    I hope it helps in certain way

    • 0