» Форма входа

»Мoy-weB ver.4.1

» Статистика

Главная » 2009 » Май » 2 » Ctrl+Enter и клавиатурные события Javascript

Ctrl+Enter и клавиатурные события Javascript
02.Май.2009 | 18:39:43
Для отправки сообщений в сети принято использовать сочетание клавиш Crtl Enter, а для навигации по страницам — Ctrl и стрелочки. Эта статья рассказывает о том, как сделать это на своем сайте.

Отправка формы по Ctrl Enter

Код и пример использования с формой.

Code

<script type="text/javascript">
function ctrlEnter(event, formElem)
  {
  if((event.ctrlKey) && ((event.keyCode == 0xA)||(event.keyCode == 0xD)))
  {
  formElem.submit.click();
  }
  }
</script>
<form action="send.php" method="post" onkeypress="ctrlEnter(event, this);">...</form>


Навигация с помощью стрелок
Скрипт не работает в Opera, т. к. такое сочетание клавиш уже использовано в этом браузере.
Code
<script type="text/javascript">
document.onkeydown = NavigateThrough;
function NavigateThrough (event)
  {
  if (!document.getElementById) return;
  if (window.event) event = window.event;
  if (event.ctrlKey)
  {
  var link = null;
  var href = null;
  switch (event.keyCode ? event.keyCode : event.which ? event.which : null)
  {
  case 0x25:
  link = document.getElementById ('previous_page');
  break;
  case 0x27:
  link = document.getElementById ('next_page');
  break;
  case 0x26:
  link = document.getElementById ('up_page');
  break;
  case 0x28:
  link = document.getElementById ('down_page');
  break;
  case 0x24:
  link = document.getElementById ('home_page');
  break;
  }
  if (link) document.location = link.href;
  }
  }
</script>
<a href="index.html" id="home_page">на главную</a>
<a href="prev-page.html" id="previous_page">предыдущая</a>
<a href="next-page.html" id="next_page">следующая</a>
<a href="down-page.html" id="down_page">уровнем ниже</a>
<a href="up-page.html" id="up_page">уровнем выше</a>

Получение объекта по id

От стандартного document.getElementById отличается только длиной.

Code
function $(elemid)  
  {  
  return document.getElementById(elemid);  
  }

Получение объектов по имени класса

Первый аргумент — имя класса, второй — имя тега (не обязательный), третий — внутри какого объекта искать (не обязательный).

Code
function $$(strClass, strTag, objContElm)  
  {  
  strTag = strTag || "*";  
  objContElm = objContElm || document;  
  var objColl = objContElm.getElementsByTagName(strTag);  
  if (!objColl.length && strTag == "*" && objContElm.all) objColl = objContElm.all;  
  var arr = new Array();  
  var delim = strClass.indexOf('|') != -1 ? '|' : ' ';  
  var arrClass = strClass.split(delim);  
  for (var i = 0, j = objColl.length; i < j; i++)  
  {  
  var arrObjClass = objColl[i].className.split(' ');  
  if (delim == ' ' && arrClass.length > arrObjClass.length) continue;  
  var c = 0;  
  comparisonLoop:  
  for (var k = 0, l = arrObjClass.length; k < l; k++)  
  {  
  for (var m = 0, n = arrClass.length; m < n; m++)  
  {  
  if (arrClass[m] == arrObjClass[k]) c++;  
  if (( delim == '|' && c == 1) || (delim == ' ' && c == arrClass.length))  
  {  
  arr.push(objColl[i]);  
  break comparisonLoop;  
  }  
  }  
  }  
  }  
  return arr;  
  }

Автор статьи: Павел Марковнин

Категория: JAVA скрипты | Просмотров: 515 | Добавил: CorsaR
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]