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) стрелка
#
Тема
Елена
Спасибо за такое полезное сообщение
#
Елена
Бирюков Павел
Ссылочку на техногрет забыли. Код ведь оттуда.
#
Бирюков Павел
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) неработает. =( я разочарован
Арс
Спасибо! Отличный рабочий скрипт навигации стрелками!!!! Спасибо!
#
Арс
4enki
В опере для навигации с помощью стрелок нужно кроме Ctrl зажимать и Shift.

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

как выглядит какой тег
жирный текст <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>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler