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;
}Рекомендуем почитать
