Перемещение между строками ввода стрелками
Здравствуйте.
Думаю все из читающих это сообщение хотябы раз заполняли какую-нибудь анкету, например на регистрирование в этом форуме. И многие при заполнении пользуются клавишей <Tab> для перехода с одной строки ввода на другую. У меня на сайте располагается таблица текстовых полей 4 на 5. И чтобы переместиться на строку ниже надо нажать пользователю <Tab> 5 раз. Можно ли как-то осуществить переход с помощью стрелок. Я уже что-то нашёл например: <body onkeydown="alert(event.keyCode);"> //Нажатие на кпоку Для управления фокусом у объекта класса окно существуют два метода focus() и blur(). //Думаю для текстовых полей тоже самое. Но у меня вопрос как узнать у кого сейчас фокус? Лично у меня только через событие "Появление фокуса" вроде onFocus() Есть ли какие другие варианты? Если что из выше написанного не правильно поправьте. |
Цитата:
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function() {
var dom = (function() {
var traversal = "firstElementChild" in document.body;
return {
next: traversal ? function(node) {
return node.nextElementSibling;
} : function(node) {
var next = node.nextSibling;
while(next && next.nodeType !== 1) {
next = next.nextSibling;
}
return next;
},
prev: traversal ? function(node) {
return node.previousElementSibling;
} : function(node) {
var prev = node.previousSibling;
while(prev && prev.nodeType !== 1) {
prev = prev.previousSibling;
}
return prev;
}
};
}());
function setFocus(e) {
e = e || window.event;
if(e.keyCode == 38 || e.keyCode == 40) {
var cell = this.parentNode;
var row = dom[e.keyCode == 38 ? "prev" : "next"](cell.parentNode);
if(row) {
row.getElementsByTagName("input")[cell.cellIndex].focus();
}
}
}
var list = document.getElementById("grid").getElementsByTagName("input");
var i = list.length;
while(i--) {
list[i].onkeydown = setFocus;
}
};
</script>
</head>
<body>
<div>
<table id="grid" summary="">
<tbody>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
|
Octane,
Если перед полем ввода есть ячейка НЕ с полем ввода а например с текстом, то скрипт не работает! т.е. вот такая таблица не подходит: <table id="grid" summary=""> <tr> <td>введите что-то:</td> <td><input type="text" /></td> <td><input type="text" /></td> </tr> <tr> <td>введите что-то:</td> <td><input type="text" /></td> <td><input type="text" /></td> </tr> </table> а что за таблица без текстовых полей ? можно подстроиться под скрипт и добавить <input type="hidden"> перед текстом "введите что-то:" тогда заработает... но сами понимаете )) |
Переделайте скрипт, чтоб работало так, кто же мешает.
|
ok, просто у меня столбцов с полями с текстом в таблице много (они стоят до полей ввода), и зря грузить их скрытыми инпутами не хотелось. Поскольку попытка решить вопрос по другому не удалась, то добавлю.
Но в любом случае спасибо за скрипт! :victory: |
| Часовой пояс GMT +3, время: 16:06. |