Caps Lock Key Detection in JavaScript and ExtJS
Sometimes in web-pages or in standalone applications containing password fields, we need to show "CAPS LOCK" key-press alert/notification, alerting user from typing wrong password.
Main logic behind detecting whether Caps-Lock is pressed or not is very simple,
i) First check, what is the ASCII value of inputed character, and if SHIFT key is pressed or not,
ii) then there are two conditions
a) if ASCII value of character inputed is between 65 to 90 (both inclusive as these are ASCII values of "A" to "Z") and shift not pressed
OR
b) shift is pressed and ASCII value of character is between 97 to 122 (corresponds to "a" to "z"),
then for above both conditions CAPS-LOCK must be pressed, so we can give Caps-Lock Notification to user.
iii) For other conditions Caps-Lock is not pressed, so we can remove Caps-Lock notification (if previously given, if any).
1) In ExtJS, How to achieve this for a simple password Text-Field -
Here is sample JS Code -
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.Msg.alert("Hi");
//Turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'under';
var fp = new Ext.FormPanel({
frame: true,
title:'Caps Lock Detection Example',
labelWidth: 110,
width: 600,
renderTo:document.body,
bodyStyle: 'padding:0 10px 0;',
id : 'CapsLockFormPanel',
items: [{
anchor : '95%',
labelWidth : 90,
labelAlign : 'left',
labelSeperator : '',
fieldLabel:'Password',
id: 'strPassword'
,xtype : 'textfield'
,inputType:'password',
allowBlank:false,
enableKeyEvents: true,
listeners: {
keypress: function(tf, e){
if(e.getKey()!=13 && e.getKey()!=10 && e.getKey()!=127){
if((!e.shiftKey && (e.getKey() >= 65 && e.getKey() <= 90)) || ((e.getKey() >= 97 && e.getKey() <= 122) && e.shiftKey)){
Ext.getCmp("app_idCAPSIndicator").setText("CAPS LOCK is ON");
Ext.getDom("app_idCAPSIndicator").style.color = "navy";
//document.getElementById("app_idCAPSIndicator").innerHTML = "CAPS LOCK is ON";
//document.getElementById("app_idCAPSIndicator").style.color = "navy";
}else{
Ext.getCmp("app_idCAPSIndicator").setText("");
}
}
if(e.getKey()==13){
Ext.Msg.alert("Enter Pressed");
}
}
}
},{
xtype : 'label',
fieldLabel : '',
labelWidth : 90,
labelAlign : 'left',
labelSeperator : '',
id: 'app_idCAPSIndicator'
}]
});
fp.show();
});
This will produce results like - When CAPS-LOCk is ON
And when CAPS-LOCK is off then
2) For plain JavaScript -
Sample Html file containing Caps-Lock Key Detection JS Function -
<html>
<head>
<link rel="shortcut icon" href="favicon.ico" >
<TITLE>Logic Pro v1.0</TITLE>
</head>
<body>
<script>
function detectCapsLock(e){
var keyPressed = (navigator.appName == "Microsoft Internet Explorer") ? e.keyCode : e.charCode;
if(keyPressed!=13 && keyPressed!=10 && keyPressed!=127){
if((!e.shiftKey && (keyPressed >= 65 && keyPressed <= 90)) || ((keyPressed >= 97 && keyPressed <= 122) && e.shiftKey)){
document.getElementById("capsDetect").innerHTML = "CAPS LOCK is ON";
document.getElementById("capsDetect").style.color = "navy";
}else{
document.getElementById("capsDetect").innerHTML = "";
}
}
if(keyPressed==13){
alert("Enter Pressed");
}
}
</script>
<div id ="DemoDiv">This is normal Javascript</div><br/><label>Enter Password - </label>
<input id="scriptBox" size="80" type="text" onkeypress="return detectCapsLock(event)"/>
<label> </label><label id="capsDetect"></label><br/><br/><br/>
</body>
</html>
Above code works for both IE and mozilla and Chrome too, for IE we need to get pressed keys char-code using event.keyCode whereas in gecko-based browsers is simply event.charCode.
Which will produce results like - When CAPS-LOCK is ON
When CAPS-LOCK is OFF.
Comments
Post a Comment