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