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