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

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

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

 

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

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

antoniO
Занятный код, уже знаю где применить -)
#
antoniO
cmepthuk
Отличный материал!
#
cmepthuk
Mr [TTTk Лёха
Соглашусь с предыдущим комментарием:Отличный материал!!!
#
Mr [TTTk Лёха
Abyss of Void
Как-то мало благодарностей за такую прелесть) спасибо!)
#
Abyss of Void
CheRooT
спасибо за интересный скрипт
#
CheRooT
Octane
Навигация с помощью стрелок

...
if (!document.getElementById) return;
..
А это для чего? Получение объектов по имени класса В новейших браузерах встроен метод node.getElementsByClassName('className') Хорошо бы проверять наличие этого метода и использовать если доступен, а для остальных браузеров выполнять его эмуляцию. getElementsByClassName работает в FF3, Opera 9.5, Safari 3, так что думаю не стоит забывать о нем ;-)
Octane
упс)) забыл тег закрыть, поправьте плз.
Kristy
А что такое 0xA? 0xD - это enter, а 0xA нигде найти не смог
Grin
Kristy, в некоторых броузерах 0xA отвечает за Enter. Коды клавиш не везде одинаковые
#
Grin
в
0хА - возврат каретки
#
в
мария
может подскажите как при удерживании Ctrl+Enter не допускать отправку в неконтролируемом количестве копий?
#
мария
Тема
Про неработу стрелок в опере. Все это работает, но если нажимать ctrl+alt(или shift) стрелка
#
Тема
Artem
cool
#
Artem
Елена
Спасибо за такое полезное сообщение
#
Елена
Бирюков Павел
Ссылочку на техногрет забыли. Код ведь оттуда.
#
Бирюков Павел
gangster1919
Спс, поставил себенавигацию стрелками
Alinaki
Присоединяюсь к вышеотписавшемуся: как избежать отправку неконтролируемого числа копий при зажатии ctrl-Enter?
Grin
Alinaki, можно при первом нажатии выставить какую-нибудь переменную, а потом ее проверять при следующих нажатиях
#
Grin
Alinaki
Да, я уже так и сделал. А вообще я поставил крутейший плагин для jQuery, чтобы обрабатывать нажатия кнопок :)
Олег
Не плохо
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;');}
	}
#
mozg
Daggett
Отличный материал!
спасибо автору!
#
Daggett
Я! =)
Проверьте правильность работы классов, т.к. вот пример не работы классов "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>
#
Я! =)
Роман
Спасибо за скриптик
Boldis Media
Пригодится для навигации, спасибо.
darya
Статья толковая, добавлю в закладки! Разберется даже ребенок!
#
darya
Иван Иванов
Ну почему я не могу отправить подарок не другу???? друзьям уходит, а вот другим пользователям нет. Раньше отправляешь подарак высвечивался код а сей час нет?????
#
Иван Иванов
Андрей
Классно конечно, но у меня ctrl + enter не заработал..
Олег
window.onkeypress = function (event) {
    e = event || window.event, key = e.keyCode || e.which;
    e.ctrlKey && key == 13 && alert(true);
}
Я считаю что это самый лучший вариант.
Кирилл
Да вот у меня как-то тоже не фурычит Ваш Ctrl + Enter :(
Печально...

Кто знает решение, помогите плиз!
Dexter
О, то что искал, щас папробую, как у меня получится. =)
Dexter
Ерунда первый скрипт (Отправка по Ctrl + enter) неработает. =( я разочарован
Арс
Спасибо! Отличный рабочий скрипт навигации стрелками!!!! Спасибо!
#
Арс

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
counter strike mt2 silkroad pvp metin2 metin2 pvp knight pvp gm olarak başlayan pvpler pvp silkroad pvp serverler counter strike serverler msn show cam show görüntülü sohbet oyunlar suskunlar gazete oku