Форум

Воитель · #1 (**permalink**) 03.10.2009, 00:19

Здравствуйте.
Думаю все из читающих это сообщение хотябы раз заполняли какую-нибудь анкету, например на регистрирование в этом форуме. И многие при заполнении пользуются клавишей <Tab>
для перехода с одной строки ввода на другую.

У меня на сайте располагается таблица текстовых полей 4 на 5.
И чтобы переместиться на строку ниже надо нажать пользователю <Tab> 5 раз.
Можно ли как-то осуществить переход с помощью стрелок.
Я уже что-то нашёл например:

<body onkeydown="alert(event.keyCode);"> //Нажатие на кпоку
Для управления фокусом у объекта класса окно существуют два метода focus() и blur(). //Думаю для текстовых полей тоже самое.

Но у меня вопрос как узнать у кого сейчас фокус?
Лично у меня только через событие "Появление фокуса" вроде onFocus()
Есть ли какие другие варианты?

Если что из выше написанного не правильно поправьте.

Kolyaj · #2 (**permalink**) 03.10.2009, 12:17

Сообщение от Воитель

Но у меня вопрос как узнать у кого сейчас фокус?

Проверять, в каком поле стрелку нажали, стопудово в ней фокус будет.

Octane · #3 (**permalink**) 03.10.2009, 12:41

<!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>

c-alex · #4 (**permalink**) 23.08.2010, 11:38

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"> перед текстом "введите что-то:" тогда заработает...
но сами понимаете ))

Octane · #5 (**permalink**) 23.08.2010, 11:53

Переделайте скрипт, чтоб работало так, кто же мешает.

c-alex · #6 (**permalink**) 23.08.2010, 15:23

ok, просто у меня столбцов с полями с текстом в таблице много (они стоят до полей ввода), и зря грузить их скрытыми инпутами не хотелось. Поскольку попытка решить вопрос по другому не удалась, то добавлю.
Но в любом случае спасибо за скрипт!

Форум

Справочник

Discord чат

Курсы javascript