Watermark for textarea textbox using JQuery

Question

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>

I can't see immediately what could be wrong. If you can get some script debug info it might help ... — McGarnagle, Apr 24 '12 at 02:45
if you try with asp.net textbox control you will see the behavior — Nick Kahn, Apr 24 '12 at 02:58
I just ran the code in ASP.NET and it works as expected (watermark clears when you enter)... all I can recommend is that you use browser debug tools (trace and watch) to figure out what's up. — McGarnagle, Apr 24 '12 at 03:22

score 7 · Accepted Answer · answered Apr 24 '12 at 02:51

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

ajax333221 · Answer 2 · 2012-04-24T02:58:07.013

0

The code itself works perfectly fine (see this demo)

The issue seems to be in your selectors

edited Apr 24 '12 at 02:58

answered Apr 24 '12 at 02:51

ajax333221

11,436
16
61
95

have you tried with asp.net textbox control? – Nick Kahn Apr 24 '12 at 02:57
@AbuHamzah to be sincere, I don't even know what those are. But I didn't need to know to be able to narrow the search a lot by proving the code is working – ajax333221 Apr 24 '12 at 03:01

score 0 · Answer 3 · answered Jun 10 '14 at 17:35

You can also use WaterMark Control that need less or you can say no configuration just put below code and it will work...

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

As you can see i have place data-watermark="Enter here...".

and yes please include WaterMark Control JS with jquery.js because Watermark Control JS uses jquery. And yes you can animate your watermark using WaterMark Control.

You can find Watermark Control JS from myjqueryplugin.com/watermark-control.

Watermark for textarea textbox using JQuery

3 Answers3