Июль 28th, 2012 
Archi «Ошибка! Неверное имя пользователя или пароль» — всем до боли знакомое сообщение, не правда ли? Причин ему может быть несколько и одной из них является незамеченный включенный Caps Lock. Так почему бы не помочь пользователю заметить, что Caps Lock включен? Благо легко определить состояние клавиши Caps Lock с помощью Javascript …
Как на Javascript узнать состояние «Caps Lock»? Теория.
Сразу же хочу предупредить, что готовой функции в Javascript нет, и все придется делать руками (но это очень просто и быстро).
Суть метода в следующем: пользователь нажимает клавишу на клавиатуре, а скрипт смотрит нажата ли символьная клавиша (буква), в каком она регистре, и удерживался ли при этом SHIFT. Если введен символ в верхнем регистре и при этом не нажат SHIFT, или введен символ в нижнем регистре и нажат SHIFT – то Caps Lock включен. Если включен Caps Lock то выводится сообщение (только не используйте для этого alert :-).
Практическая реализация
Рассмотрим основной файл capslock.js
/* _capsLockDetect определяет состояние клавиши Caps Lock, анализируя нажатую клавишу. Она вызывается при нажитии клавиши (при событиях keypress и keydown). */ function _capsLockDetect(e) { /* Если в функцию не был передан аргумент e (содержащий объект Event), то присвоаиваем e ссылку на объект window.event если он определен, либо null. При возникновении собития (в нашем случае нажатии клавиши) свойства произошедшего события заносятся в объект Event; Gecko передает данный объект как аргумент функции обработчику ( _capsLockDetect(e) ), а IE создает глобальный объект window.event */ if (!e) e = window.event || null; /* Если не найден объект Event, или не определена произвольная пользовательская функция oncapslock, которая должна оповещать пользователя, что caps Lock включен, то завершаем работу. */ if (typeof(oncapslock)!="function" || !e) return; var n = e.keyCode?e.keyCode:e.charCode; //Код нажатой клавиши if (e.type=="keypress")//Если произошло событие keypress { var c = String.fromCharCode(n); //Получаем символ по его коду var cUC = c.toUpperCase(); //переводим символ в верхний регистр var cLC = c.toLowerCase(); //переводим символ в нижний регистр /* Если cUC и cLC не равны, то для символа, соответствующего нажатой клавише, имеет смысл Caps Lock (т.е. это буква) и мы можем определить состояние клавиши Caps Lock, учитывая регистр полученного символа, а также состояние клавиши Shift. */ if (cUC!=cLC) { oncapslock((e.shiftKey && cLC==c) || (!e.shiftKey && cUC==c)); } } /*Если произошло событие keydown и нажата клавиша Caps Lock, то думаем, что Caps Lock отключен (так как мы не можем занть изночально включен Caps Lock или нет, поэтому думаем что отключен). */ else if (e.type=="keydown" && n==20) oncapslock(false); } /*Регистрируем обработчики для событий keypress и keydown, которые и запускают _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А теперь пример работы.
Все что нужно, это подключить библиотечку и определить Вашу функцию oncapslock, которая будет оповещать пользователя, что caps Lock включен.
<html> <head> <!-- Подключаем основной файл capslock.js --> <script type="text/javascript" src="capslock.js"></script> <script language="JavaScript"> /* Определяем функцию которая выполняет нужные нам действия в зависимости от сотояния Caps Lock. Данной функции передается в качестве параметра булево значение (true - Caps Lock включен, false - Caps Lock отключен). */ 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>Все очень просто.
Пояснения
Может возникнуть вопрос, почему регистрируются обработчики и для собития «keypress» и для «keydown»? Одного не хватит? Нет, не хватит, ибо «keypress» не перехватывает нажатие клавиши «Caps Lock», но возвращает разные коды для разных регистров символа, а «keydown» — перехватывает Caps Lock, но не позволяет определить регистр символа нажатой клавиши (не зависимо от Shift или состояния Caps Lock возвращается один и тотже код — виртуальный код клавиши).
В чем разница между keyCode и charCode? Это относится только к W3C браузерам таким как Gecko (Firefox, Mozilla …), для IE свойство charCode неопределено. Свойство charCode действительно только для события keypress. Если нажатая клавиша соответствует символу Unicode, то данное свойство возвращает код этого символа чувствительный к регистру. Если же клавиша является служебной или событие отлично от keypress, то charCode равен 0. Свойство keyCode возвращает виртуальный код клавищи (не чувствительный к регистру), вызвавшей событие, или 0, если charCode не равно нулю. keydown и keyup заносят виртуальный код клавиши в keyCode, а charCode обнуляется.
Для IE определено только свойство keyCode, которое возвращает Unicode код нажатой клавиши (коды и служебных и символьных клавиш заносятся в это свойство в «кучу»).
Источник: internet-technologies.ru
Опубликовано в рубрике 
Метки: