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 comes 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.
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.
User contributions licensed under CC BY-SA 3.0