Introduction
This article shows JavaScript code to highlight a textbox when it gets the focus. The JavaScript highlights the textbox when the cursor is focused on it.
Background
This article describes how to attach events dynamically.
Using the code
Following is the JavaScript to attach an event dynamically at the time of page loading..
<script language="javascript" type="text/javascript">
function fnTXTFocus(varname)
{
var objTXT = document.getElementById(varname)
objTXT.style.borderColor = "Red";
}
function fnTXTLostFocus(varname)
{
var objTXT = document.getElementById(varname)
objTXT.style.borderColor = "White";
}
function fnOnLoad()
{
var t = document.getElementsByTagName('INPUT');
var i;
for(i=0;i<t.length;i++)
{
if(t[i].type == "text")
{
t[i].attachEvent('onfocus', new Function("fnTXTFocus('"+t[i].id+ "')"));
t[i].attachEvent('onblur', new Function("fnTXTLostFocus('"+t[i].id+ "')"));
}
}
}
</script>
<body onload="fnOnLoad()">
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
UserName ::
</td>
<td>
<asp:TextBox ID="txtUN" runat="server" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
Password ::
</td>
<td>
<asp:TextBox ID="txtPwd" runat="server" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
Confirm Password ::
</td>
<td>
<asp:TextBox ID="txtCpwd" runat="server" ></asp:TextBox>
</td>
</tr>
</table>
</div>
</form>
</body>
The above JavaScript:
- Finds the list of textboxes and stores it in an array.
- Attaches the
OnFocus and OnBlur events to each textbox in the list.
So now, whenever a textbox gets/loses focus, the assigned function will fire.
