I have been looking online for a Watermark effect for my textboxes to get some help and found a piece of code which looks like the following :

Javascript:

function WaterMark(objtxt, event) {
var defaultText = "Username";
var defaultpwdText = "Password";
// Condition to check textbox length and event type
if (objtxt.id == "tb_Username" || objtxt.id == "tb_Password") {
    if (objtxt.value.length == 0 & event.type == "blur") {
        //if condition true then setting text color and default text in textbox
        if (objtxt.id == "tb_Username") {
            objtxt.style.color = "Gray";
            objtxt.value = defaultText;
        }
        if (objtxt.id == "tb_Password") {
            document.getElementById("<%= tb_TempPassword.ClientID %>").style.display = "block";
            objtxt.style.display = "none";
        }
    }
}
// Condition to check textbox value and event type
if ((objtxt.value == defaultText || objtxt.value == defaultpwdText) & event.type == "focus") {
    if (objtxt.id == "tb_Username") {
        objtxt.style.color = "black";
        objtxt.value = "";
    }
    if (objtxt.id == "tb_TempPassword") {
        objtxt.style.display = "none";
        document.getElementById("<%= tb_Password.ClientID %>").style.display = "";
        document.getElementById("<%= tb_Password.ClientID %>").focus();
    }
}

}

Then the HTML:

<asp:TextBox runat="server" ID="tb_Username" Text="Username" onblur="WaterMark(this, event);" onfocus="WaterMark(this, event);" />

<asp:TextBox runat="server" ID="tb_TempPassword" Text="Password" onfocus="WaterMark(this, event);" ForeColor="Gray" />

<asp:TextBox runat="server" ID="tb_Password" TextMode="Password" text="Password" Style="display:none" onblur="WaterMark(this, event);"/>

But for some reason when i run my code the Username box works fine but the password box es up with an error saying:

0x800a138f - JavaScript runtime error: Unable to get property 'style' of undefined or null reference

I have been looking online for a fix and nothing is working? Is this because my Textbox is linking to a CSS stylesheet?

Any help would be greatly appreciated.

I have been looking online for a Watermark effect for my textboxes to get some help and found a piece of code which looks like the following :

Javascript:

function WaterMark(objtxt, event) {
var defaultText = "Username";
var defaultpwdText = "Password";
// Condition to check textbox length and event type
if (objtxt.id == "tb_Username" || objtxt.id == "tb_Password") {
    if (objtxt.value.length == 0 & event.type == "blur") {
        //if condition true then setting text color and default text in textbox
        if (objtxt.id == "tb_Username") {
            objtxt.style.color = "Gray";
            objtxt.value = defaultText;
        }
        if (objtxt.id == "tb_Password") {
            document.getElementById("<%= tb_TempPassword.ClientID %>").style.display = "block";
            objtxt.style.display = "none";
        }
    }
}
// Condition to check textbox value and event type
if ((objtxt.value == defaultText || objtxt.value == defaultpwdText) & event.type == "focus") {
    if (objtxt.id == "tb_Username") {
        objtxt.style.color = "black";
        objtxt.value = "";
    }
    if (objtxt.id == "tb_TempPassword") {
        objtxt.style.display = "none";
        document.getElementById("<%= tb_Password.ClientID %>").style.display = "";
        document.getElementById("<%= tb_Password.ClientID %>").focus();
    }
}

}

Then the HTML:

<asp:TextBox runat="server" ID="tb_Username" Text="Username" onblur="WaterMark(this, event);" onfocus="WaterMark(this, event);" />

<asp:TextBox runat="server" ID="tb_TempPassword" Text="Password" onfocus="WaterMark(this, event);" ForeColor="Gray" />

<asp:TextBox runat="server" ID="tb_Password" TextMode="Password" text="Password" Style="display:none" onblur="WaterMark(this, event);"/>

But for some reason when i run my code the Username box works fine but the password box es up with an error saying:

0x800a138f - JavaScript runtime error: Unable to get property 'style' of undefined or null reference

I have been looking online for a fix and nothing is working? Is this because my Textbox is linking to a CSS stylesheet?

Any help would be greatly appreciated.

• javascript
• html
• asp

• Pay attention the the id(s). the ID attribute of an asp:TextBox differs from the generated id resulting from processing the TextBox. The input id is not tb_Password. – user1047100 Commented Apr 28, 2014 at 11:00
• @Geeo How would i get around this? – user3507542 Commented Apr 28, 2014 at 11:01

4 Answers 4

Try this..

    var id=objtxt.id.toString();
    document.getElementById(id).setAttribute("style", "color:Gray");

Please check if you are getting value of document.getElementById("<%= tb_Password.ClientID %>") or not?

value of document.getElementById("<%= tb_Password.ClientID %>") should not be null.

You can also use .hide() and .show() functions.

In my case the following worked -

I placed the script just before closing tag of ( as I am using a masterpage) and instead of writing getelementbyid(menuid.UniqueID) I wrote getelementbyid(menuid.ClientID).

I am also facing this problem and I solve it myself. The issue is related to panel and this panel visible property is false. instead of this set it as display as none value. now its working.