Say Javascript, whether it is pressed Caps Lock?
" The mistake! An incorrect login name or the password " - all up to a pain the familiar message, is not it? The reasons for him can be a little and one of them is unnoticed switched on Caps Lock. So why to not help the user to notice, what Caps Lock it is switched on? The blessing is easy to define{determine} a status of key Caps Lock with help Javascript...
How on Javascript to learn{find out} a status " Caps Lock "? The theory.
At once I want to warn, that ready function in Javascript no, and it is necessary to do{make} all hands (but it is very simple and fast).
Essence of a method in the following: the user presses a key on the keyboard, whether and the script looks the symbolical key (letter) in what she the register, and whether it was kept thus SHIFT is pressed. If the symbol in the top register is entered and thus is not pressed SHIFT, or the symbol in the bottom register is entered and pressed SHIFT - that Caps Lock is switched on. If it is switched on Caps Lock that the message (only do not use for this purpose alert:-) is deduced.
Practical realization
Let's consider the basic file capslock.js
/*
_capsLockDetect defines{determines} a status of key Caps Lock,
Analyzing the pressed key.
She is caused at nazhitii keys (at events keypress and keydown).
*/
function _capsLockDetect (e)
{
/*
If the argument has not been transferred{handed} to function e (containing object Event),
That prisvoaivaem e the link to object window.event if he is determined,
Or null.
At occurrence sobitija (in our case pressing of a key) properties
The occurring event will be worn out in object Event;
Gecko passes the given object as argument of function obrabotchiku
(_capsLockDetect (e)), and IE creates global object window.event
*/
if (! e) e = window.event || null;
/*
If not object Event is found, or is not determined any
The user function oncapslock which should
To notify the user, that caps Lock it is switched on, we finish job.
*/
if (typeof (oncapslock)! = "function" ||! e) return;
var n = e.keyCode? e.keyCode:e.charCode; // the Code of the pressed key
if (e.type == "keypress") // If there was an event keypress
{
var c = String.fromCharCode (n); // we Receive a symbol on his code
var cUC = c.toUpperCase (); // we translate a symbol in the top register
var cLC = c.toLowerCase (); // we translate a symbol in the bottom register
/* If cUC and cLC are not equal, for the symbol corresponding pressed
To key, it is meaningful Caps Lock (i.e. it is the letter) and we can define{determine}
Status of key Caps Lock, taking into account the register of a received symbol,
And also a status of key Shift.
*/
if (cUC! =cLC)
{
oncapslock ((e.shiftKey ** cLC == c) || (! e.shiftKey ** cUC == c));
}
}
/*Esli There was an event keydown and key Caps Lock is pressed,
That we think, that Caps Lock it is switched - off (as we cannot zant`
iznochal`no it is switched on Caps Lock whether or not, therefore we think that is switched - off).
*/
else if (e.type == "keydown" ** n == 20) oncapslock (false);
}
/*Registriruem obrabotchiki for events keypress and keydown,
Which start _capsLockDetect.
*/
if (document.addEventListener) // IE
{
document.addEventListener ("keypress", _capsLockDetect, false);
document.addEventListener ("keydown", _capsLockDetect, false);
}
else if (document.attachEvent) // W3C (Gecko...)
{
document.attachEvent ("onkeypress", _capsLockDetect);
document.attachEvent ("onkeydown", _capsLockDetect);
}
else document.onkeypress = document.onkeydown = _capsLockD
And now an example of job.
All that is necessary, it to connect bibliotechku and to define{determine} your function oncapslock which will notify the user, that caps Lock is switched on.
<html>
<head>
<! - the basic file capslock.js-> Is connected
<script type = "text/javascript" src = "capslock.js"> </script>
<script language = "JavaScript">
/*
We determine function which carries out the actions necessary to us in dependence
From sotojanija Caps Lock. To the given function it is passed as parameter
bulevo value (true - Caps Lock it is switched on, false - Caps Lock is switched - off).
*/
window.oncapslock = function (on) {document.getElementById ('capsLock') .style.color=on? ' red ':'white';}
</script>
</head>
<body>
<form>
<input name = "login" type = "text">
<span id = "capsLock" style = " color:white; "> Caps Lock </span>
</form>
</body>
</html>
All is very simple.
Explanatories
There can be a question why are registered obrabotchiki both for sobitija "keypress" and for "keydown"? One will not suffice? No, will not suffice, for "keypress" does not intercept pressing a key " Caps Lock ", but returns different codes for different registers of a symbol, and "keydown" - intercepts Caps Lock, but does not allow to define{determine} the register of a symbol of the pressed key (it is not dependent from Shift or statuses Caps Lock comes back one and totzhe a code - a virtual code of a key).
In what a difference between keyCode and charCode? It concerns only to W3C to browsers such as Gecko (Firefox, Mozilla...), for IE property charCode neopredeleno. Property charCode is valid only for event keypress. If the pressed key corresponds{meets} to symbol Unicode the given property returns a code of this symbol sensitive to the register. If the key is service or event is distinct from keypress charCode it is equal 0. Property keyCode returns a virtual code klavihhi (not sensitive to the register), called event, or 0 if charCode it is not equal to zero. keydown and keyup will wear out a virtual code of a key in keyCode, and charCode it is nulled.
For IE property keyCode which returns Unicode a code of the pressed key (codes is determined only and service and symbolical keys will be worn out in this property in "heap").
