Ctrl+Enter и клавиатурные события Javascript

19 апреля 2008, 18:46 Павел Марковнин JavaScript рейтинг +40-

Для отправки сообщений в сети принято использовать сочетание клавиш Crtl Enter, а для навигации по страницам — Ctrl и стрелочки. Эта статья рассказывает о том, как сделать это на своем сайте.

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

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

<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, т. к. такое сочетание клавиш уже использовано в этом браузере.

<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 отличается только длиной.

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

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

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

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;
}

Memori.rumister-wong.combobrdobr.rumoemesto.rudel.icio.uszakladki.yandex.rugoogle.com/bookmarks/
Рекламное место, которое может стать вашим

Понравилась статья?

Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.

Читать в Яндекс.Ленте Добавить в Google Добавить в Netvibes
  •  

Комментарии — 15

RSS
  • Аватарка
    8 мая 2008, 15:59 antoniO
    Занятный код, уже знаю где применить -)
  • Аватарка
    16 июня 2008, 22:54 cmepthuk
    Отличный материал!
  • Аватарка
    6 июля 2008, 14:38 Mr [TTTk Лёха
    Соглашусь с предыдущим комментарием:Отличный материал!!!
  • Аватарка
    11 июля 2008, 8:59 Abyss of Void
    Как-то мало благодарностей за такую прелесть) спасибо!)
  • Аватарка
    17 июля 2008, 13:24 CheRooT
    спасибо за интересный скрипт
  • Аватарка
    20 июля 2008, 22:22 Octane
    Навигация с помощью стрелок
    
    ...
    if (!document.getElementById) return;
    ..
    
    А это для чего? Получение объектов по имени класса В новейших браузерах встроен метод node.getElementsByClassName('className') Хорошо бы проверять наличие этого метода и использовать если доступен, а для остальных браузеров выполнять его эмуляцию. getElementsByClassName работает в FF3, Opera 9.5, Safari 3, так что думаю не стоит забывать о нем ;-)
  • Аватарка
    20 июля 2008, 22:29 Octane
    упс)) забыл тег закрыть, поправьте плз.
  • Аватарка
    22 июля 2008, 13:58 Kristy
    А что такое 0xA? 0xD - это enter, а 0xA нигде найти не смог
  • Аватарка
    22 июля 2008, 14:39 Grin
    Kristy, в некоторых броузерах 0xA отвечает за Enter. Коды клавиш не везде одинаковые
  • Аватарка
    16 августа 2008, 21:09 в
    0хА - возврат каретки
  • Аватарка
    29 августа 2008, 11:51 мария
    может подскажите как при удерживании Ctrl+Enter не допускать отправку в неконтролируемом количестве копий?
  • Аватарка
    11 сентября 2008, 21:12 Тема
    Про неработу стрелок в опере. Все это работает, но если нажимать ctrl+alt(или shift) стрелка
  • Аватарка
    19 марта 2009, 12:01 Artem
    cool
  • Аватарка
    13 мая 2009, 18:13 Елена
    Спасибо за такое полезное сообщение
  • Аватарка
    18 мая 2009, 8:53 Бирюков Павел
    Ссылочку на техногрет забыли. Код ведь оттуда.
  • Эл. почта (используется для Граватарки)
  • Домашняя страница
  • Имя в Твиттере
  • Разрешенные теги Текст сообщения (надо бы заполнить это поле)
  • как выглядит какой тег
    жирный текст <b>жирный текст</b>
    курсивный тект <i>курсивный тект</i>
    зачеркнутый текст <s>зачеркнутый текст</s>
    подчеркнутый текст <u>подчеркнутый текст</u>
    ссылка <a href="адрес">ссылка</a>
    function foo() { ... }
    <pre><code>function foo() { ... } </code></pre>