Textarea text box watermark using jQuery

I am trying to use a watermark for an asp.net textbox control with jquery, and below is the code that I have, I see the title in the textarea text box, but when I focus or click on the text box, 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> 
+3
source share
3 answers

if you just use the idea of ​​a watermark, there are many alternatives and a much simpler way to achieve it.

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

2) HTML5 , placeholder, , .

3) jquery, http://code.google.com/p/jquery-watermark/

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

,

+7

(. )

, ,

0

WaterMark Control, , , , ...

<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 a place data-watermark = "Enter here ..." .

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

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

0
source

All Articles