Watermark using JavaScript.

Hi all, whenever we want watermark property for textbox we all look for ajax control. But Ajax is not the only way to do so, here I am gonna show how to implement watermark property for textbox using Javascript.

Source page:

xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
    <title>Watermark using JavaScript</title>
    <script type=”text/javascript”>
        function WaterMarkOnFocus(txt, str) {
            if (txt.value == str) {
                txt.value = ”;
                txt.style.color = ‘Black’;
            }
        }

        function WaterMarkOnBlur(txt, str) {
            if (txt.value == ”) {
                txt.value = str;
                txt.style.color = ‘LightGray’;
            }
        }
    </script>
</head>
<body>
    <form id=”form1″ runat=”server”>
    <div>
        <h1>
            Watermark using JavaScript</h1>
        <asp:TextBox ID=”txtWatermark” runat=”server” Style=”color: LightGray”>
    </div>
    </form>
</body>
</html>

 

Code Behind:

using System;

public partial class Watermark_using_javascript : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string str = “Type here”;
        txtWatermark.Text = str;
        txtWatermark.Attributes.Add(“onfocus”, “WaterMarkOnFocus(this,'” + str + “‘);”);
        txtWatermark.Attributes.Add(“onblur”, “WaterMarkOnBlur(this,'” + str + “‘);”);
    }
}

1

Advertisements

11 thoughts on “Watermark using JavaScript.

  1. Hello there! This post could not be written any better! Reading this post reminds me of my previous room mate! He always kept chatting about this. I will forward this write-up to him. Fairly certain he will have a good read. Thanks for sharing!

  2. Write more, thats all I have to say. Literally, it
    seems as though you relied on the video to make your point.
    You definitely know what youre talking about, why throw away your intelligence
    on just posting videos to your blog when you could be giving us something enlightening to read?

  3. I have been exploring for a little for any high-quality articles or blog posts on this sort of space .
    Exploring in Yahoo I eventually stumbled upon this site.
    Reading this info So i’m happy to exhibit that I’ve a very good uncanny feeling I found out exactly
    what I needed. I most undoubtedly will make
    sure to don?t put out of your mind this site and provides it
    a look on a constant basis.

  4. You’re so interesting! I don’t think I have read something like that before.
    So great to discover another person with unique thoughts on this topic.
    Really.. thank you for starting this up. This site is
    one thing that is needed on the web, someone with some originality!

  5. After study a number of of the blog posts on your website now, and I actually like your method of blogging. I bookmarked it to my bookmark website listing and might be checking again soon. Pls check out my web page as well and let me know what you think.

  6. Your means of describing the whole thing in this piece of writing is
    truly fastidious, all be able to effortlessly know it,
    Thanks a lot.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s