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

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

Для отправки сообщений в сети принято использовать сочетание клавиш 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;
}

Рекламное место, которое может стать вашим

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

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

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

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

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 Бирюков Павел
    Ссылочку на техногрет забыли. Код ведь оттуда.
  • Аватарка
    31 июля 2009 в 23:36 ]]>gangster1919]]>
    Спс, поставил себенавигацию стрелками
  • Аватарка
    17 августа 2009 в 10:41 ]]>Alinaki]]>
    Присоединяюсь к вышеотписавшемуся: как избежать отправку неконтролируемого числа копий при зажатии ctrl-Enter?
  • Аватарка
    17 августа 2009 в 10:47 ]]>Grin]]>
    Alinaki, можно при первом нажатии выставить какую-нибудь переменную, а потом ее проверять при следующих нажатиях
  • Аватарка
    18 августа 2009 в 15:28 ]]>Alinaki]]>
    Да, я уже так и сделал. А вообще я поставил крутейший плагин для jQuery, чтобы обрабатывать нажатия кнопок :)
  • Аватарка
    15 сентября 2009 в 18:02 ]]>Олег]]>
    Не плохо
  • Аватарка
    22 ноября 2009 в 20:47 ]]>mozg]]>
    Вот еще вариант ловли ctrl + enter
    
    window.captureEvents(Event.KeyPress);
    window.onkeypress = pressed;
    function pressed(e) {
    	key = e.keyCode || e.which;
    	if(e.ctrlKey && (key == 13))
    		{alert('123 window.onkeypress = pressed;');}
    	}
    
  • Аватарка
    11 февраля в 19:39 Daggett
    Отличный материал!
    спасибо автору!
  • Аватарка
    14 февраля в 11:36 Я! =)
    Проверьте правильность работы классов, т.к. вот пример не работы классов "m", и не работают они только потому, что не сушествует слааса "mc" с номером "2", вот пример:

    <!doctype html>
     <head>
      <meta charset="utf-8">
     </head>
     <body>
    
    
    <div>text</div>
    <span class="mc">text</span>
    <p class="mc">text</p>
    <br><br>
    <div class="m">text</div>
    <span class="m">text</span>
    <p class="m">text</p>
    
    
     </body>
    <script type="text/javascript">
    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; 
    	}
    
    $$('mc')[0].style.color='red'
    $$('mc')[2].style.color='red'
    
    $$('m')[0].style.color='red'
    $$('m')[2].style.color='red'
    </script>
    </html>
  • Аватарка
    27 марта в 21:17 ]]>Роман]]>
    Спасибо за скриптик
  • Аватарка
    4 апреля в 0:41 ]]>Boldis Media]]>
    Пригодится для навигации, спасибо.
  • Аватарка
    20 апреля в 10:05 ]]>darya]]>
    Статья толковая, добавлю в закладки! Разберется даже ребенок!
  • Эл. почта (используется для Граватарки)
  • Домашняя страница
  • Имя в Твиттере
  • Разрешенные теги Текст сообщения (надо бы заполнить это поле)
  • как выглядит какой тег
    жирный текст <b>жирный текст</b>
    курсивный тект <i>курсивный тект</i>
    зачеркнутый текст <s>зачеркнутый текст</s>
    подчеркнутый текст <u>подчеркнутый текст</u>
    ссылка <a href="адрес">ссылка</a>
    function foo() { ... }
    <pre><code>function foo() { ... } </code></pre>