how to handle caps lock using java script

Output :











Let us consider Login form or Login page in a web application.
When user tries to enter password in the provided text box, we can check whether the Caps lock is on, on the client machine.

This is done by using a java script function that can be called on key press event of the text box.

Password Text Box:

<asp:TextBox ID="txtPwd" runat="server" TextMode="Password" Width=150 onkeypress="CheckPasswordFont('Images/Warning.GIF',this);" onkeyup="kyup(this);" onfocusout="hideTip();"></asp:TextBox><br/>

'Images/Warning.GIF' is an image file that says friendly image saying that caps lock is on.
Java script function:

function CheckPasswordFont(imgpth,obj)
{
var e=event;
var kc = e.keyCode?e.keyCode:e.which;
var sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
//Checking even when user hits a button holding shift key
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
showPswdTip("<IMG SRC='"+imgpth+"' />",obj);
else
hideTip();
return true;
}
“spnTip” is html label whose inner html is filled with the Caps lock on image indicator.
function showPswdTip(txt,obj)
{

var theTip = document.getElementById("spnTip");
var crd=findPosition(document.getElementById(obj.id));
theTip.style.top=crd[1]+30;
theTip.style.left=crd[0];
theTip.innerHTML = txt;
theTip.style.visibility = "visible";
}

function hideTip()
{
document.getElementById("spnTip").style.visibility = "hidden";
}

<label id="spnTip" style="position:absolute; visibility:hidden;background:lightyellow;
border:1px solid gray;padding:2px;font-size:8pt;font-family:Verdana;" onmouseout="hideTip()"></label>