[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - программирование / Java Script /

Скажи Javascript, нажат ли Caps Lock?

"Ошибка! Неверное имя пользователя или пароль" - всем до боли знакомое сообщение, не правда ли? Причин ему может быть несколько и одной из них является незамеченный включенный 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 код нажатой клавиши (коды и служебных и символьных клавиш заносятся в это свойство в "кучу").





Комментарии

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / Java Script /

Живые меню или Как сделать красиво с помощью CSS и JavaScript
14-03-2009   

Наверное, никто не сможет поспорить с утверждением, что главное в любой web-страничке - удобство для пользователя. После того, как мы выложили наше творение в сеть, мы сразу начинаем предпринимать массу усилий для того, чтобы привлечь на свой сайт максимум посетителей... подробнее

Кол. просмотров: общее - 4058 сегодня - 1

Локальная баннерная система
14-03-2009   

Этот скрипт поможет вам организовать на своем сайте или страничке баннерную систему. Первый фрагмент вы вставляете в любое место странички... подробнее

Кол. просмотров: общее - 3704 сегодня - 1

Локальная реклама
14-03-2009   

В Internet Zone-154 была небольшая заметка Локальная баннерная система. Автор - Вадим Беляков (http://tuta.da.ru) предлагал поставить на страничку баннер, используя небольшой javascript. Я прочитал этот номер лишь в середине апреля. Мне сразу же пришло в голову использовать его для текстовой рекламы... подробнее

Кол. просмотров: общее - 3936 сегодня - 2

Использование JS для создания «умных» форм
14-03-2009   

JS, или JavaScript язык сценариев, которые выполняются на стороне клиента и не требует перезагрузки страницы. JavaScript был разработан компанией Netscape в 1995 году... подробнее

Кол. просмотров: общее - 3838 сегодня - 2

Обманщик спам-роботов
14-03-2009   

Как известно, бичом современного Интернета является спам - непрошенная рассылка рекламных и прочих сообщений. По данным некоторых аналитиков, он составляет более 50% всех сообщений в Сети... подробнее

Кол. просмотров: общее - 4013 сегодня - 0



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects