Переход между полями формы/таблицы (не при помощи Tab)

@Сергей1980 · Регистрация: 17.12.2009

Студворк — интернет-сервис помощи студентам

Добрый вечер всем! Возник вопрос по использованию клавиш ВВЕРХ/ВНИЗ/ВЛЕВО/ВПРАВО в качестве переходов между полями/таблицы формы в соответствующих направлениях. Можно ли это реализовать как нибудь средствами HTML/PHP? Или javascript? Чтобы к примеру не использовать клавишу TAB (tabindex) а использовать полноценное управление вверх вниз,влево вправо стрелками на клаве? это очень бы облегчило переходы между полями таблицы.

@Сергей1980 · 03.12.2011, 22:22 **[ТС]**

Привет коллеги, никто не знает ответа на данный вопрос?

@parikmaher534 · 04.12.2011, 08:43

Можно. Отслеживайте нажатие клавиш необходимых и эмулируйте onfocus на нужных элементах формы. Если юзаете jquery то все прозрачно эмуляция будет - ....focus(); На нативном event.initEvent -вот ссылка https://developer.mozilla.org/... .initEvent

@Сергей1980 · 04.12.2011, 13:32 **[ТС]**

Спасибо за ссылку, буду пробовать.!

@Ципихович Эндрю · 04.12.2011, 19:08

скажите пожалуйста в Вашем вопросе под формой какая имеется ввиду
лучше сначала спросить как их по феншую правильно называть
1) форма сделанная на ХТМЛ
2) форма, та которая появляется посредине экрана и у неё есть в углу крестик для её закрытия

Можно Вас попросить когда разберетесь выложите пример рабочий

@Сергей1980 · 04.12.2011, 19:39 **[ТС]**

Ну ежели по феншую, то вариант номер 1, <form> итд и.т.п. , внутри соответственно <table> по полям которой собственно после выполнения кода и открытия страницы надо бегать. Бегать собственно уже не по фэншую а при помощи клавиш влево вправо вверх вниз) есть вариант у вас?)

Добавлено через 10 минут

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
<head>
<title>Работа с MySQL</title>
</head>
<form>
<body>
<h1>Подключение к базе данных</h1>
* *<h1>Список товаров</h1>
<!– Выводим список товаров –>
<table border=2 bordercolor=red>
<!– Выводим заголовок списка товаров –>
<tr>
<th>КОД</th>
<th>ЭКСПЕДИТОР</th>
<th>КОНТЕЙНЕР</th>
<th>ПЛАН СКЛАД</th>
</tr>
<?php
//Соединяемся с сервером MySQL
$connection = mysql_connect('localhost','root');
if(!$connection) die('Ошибка доступа к базе данных.Приносим свои извинения');
//Выбираем базу данных test_base
if(!mysql_select_db('test_base'))
die('База данных отсутствует. Приносим свои извинения');
*//Устанавливаем кодировку CP-1251
mysql_query('SET NAMES cp1251');
print('База данных выбрана успешно!!!!!!!');
*//Получаем список товаров
* * $qresult=mysql_query('SELECT * FROM tbl_postavki');
* * *if(!$qresult) die('Ошибка доступа к базе данных. Приносим *свои извинения!')
* * * *// Очередную строку из результата запроса информацию о поставках
* * * * // записываем в ассоциативный массив $row
*while($row=mysql_fetch_array($qresult))
* * * * * *//выводим элементы массива $postavki с именами kod,ekspeditor,kontainer,plan sklad
*{print \n<tr><td>{$row['kod']}</td>
* * * * * * <td>{$row['ekspeditor']}</td>
* * * * * * <td>{$row['kontainer']}</td>
* * * * * * <td>{$row['plansklad']}</td></tr>\n;}
?>
</table>
</form>
</body>
</html>

В общем то такие дела. Вот код. Все работает. Вид классический. Выводит таблицу в форме после открытия страницы. Внутри form находится table . Самое что ни наесть феншуистое выражение. Есть идеи?)

@GuardCat · 05.12.2011, 16:33

------ В PHP не силён, потому сделал вариант на своей разметке. Буду рад, если окажется полезным. К сожалению, нет времени адаптировать под IE. Этот вариант под IE8 не работает, поскольку использует querySelector() (но это не принципиально) и .nextElementSibling / previousElementSibling (а вот это уже принципиально). В IE9 будет ли работать не знаю, не читал о его возможностях.
------ И ещё момент: если лишить пользователя возможности стрелочками перемещаться по строке, которую он редактирует, вас будут проклинать. Я сделал вариант перемещения с зажатой клавишой Ctrl. Кликните в любое текстовое поле, зажмите контрол и понажимайте стрелочки. Если вас не страшат проклятия, в коде отмечено, какую строку убрать.
Итак, некроссбраузерный код + разметка:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <table>
            <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>
                <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>
                <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>
                <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>
                <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>
                <td><input type = "text"></td>
            </tr>
        </table>
    </body>
    <script>
        window.document.onkeydown = function () {
            startRefocus();
        }
        function startRefocus(event) {
            event = event || window.event;
            if (!event.ctrlKey) return; // Закомментируйте эту строку, если Ctrl не нужен
            var key = event.keyCode;
            var targetElement = event.target || event.srcElement;
            focusMe(targetElement, key);
        }
        function focusMe(input, key) {
            var needFocusElement = true;
            function detectColumn(td) {
                var result = 0, x;
                while (td = td.previousElementSibling) {
                    ++result
                }
                return result;
            }
            try {
                switch (key) {
                    case 37:
                        needFocusElement = input.parentNode.previousElementSibling.querySelector("input");
                        break;
                    case 39: 
                        needFocusElement = input.parentNode.nextElementSibling.querySelector("input");
                        break;
                    case 38:
                        needFocusElement = input.parentNode.parentNode.previousElementSibling.querySelectorAll("td")[detectColumn(input.parentNode)].querySelector("input");
                        break;
                    case 40: 
                        needFocusElement = input.parentNode.parentNode.nextElementSibling.querySelectorAll("td")[detectColumn(input.parentNode)].querySelector("input");
                }
            } catch (e) {
                needFocusElement = false;
            }
 
            if (!needFocusElement) return;
            needFocusElement.focus();
        }
    </script>
</html>

@Сергей1980 · 07.12.2011, 15:36 **[ТС]**

Спасибо за примерчик! Потестил. Есть два минуса огромных, у нас никто уже IE не пользуется, в основном mozilla и google chrome. И самый большой минус ,что тема перехода по полям таблицы
типа:

HTML5
1
2
3
4
5
6
7
8
9
10
<table>
<tr>
<td> ПОЛЕ A</td>
<td>ПОЛЕ A1</td>
</tr>
<tr>
<td>ПОЛЕ Б</td>
<td>ПОЛЕ Б1</td>
</tr>
</table>

при помощи клавиш ВЛЕВО/ВПРАВО/ВВЕРХ/ВНИЗ так к сожалению и не раскрыта.
Никто не смог дать ответа. Я новичок в программировании на JavaScript. Неужели нет функции,
которая позволяет двигаться по клеткам таблицы, как в экселе, просто клавишами ВЛЕВО/ВПРАВО/ВВЕРХ/ВНИЗ?:cofee2:

@GuardCat · 07.12.2011, 15:47

----- Сергей1980, подождите, а как вы собираетесь двигаться по ячейкам таблицы? Выделяя, например, цветом текущую ячейку? А для чего? Вот выделил я ячейку цветом, что я могу с ней сделать? Редактировать текст в ней или копировать содержимое? Или просто наслаждаться выбором?

@Сергей1980 · 07.12.2011, 16:28 **[ТС]**

Вот если быть точнее код более полный:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
 
 
<html>
 
 
<body>
 
<form>
 
<table border=1 bordercolor=blue>
 
<tr>
<th>КОД</th>
<th>КОНТЕЙНЕР</th>
<th>ETD</th>
</tr>
 
<tr>
<td><input type=text value="1"></td>
<td><input type=text value="MSKU7892546"></td>
<td><input type=text value="2011.28.08"></td>
</tr>
 
<tr>
<td><b><input type=text value="2"></b></td>
<td><input type=text value="MSKU5896134"></b></td>
<td><input type=text value="2011.23.07"></b></td>
</tr>
 
<tr>
<td><b><input type=text value="3"></b></td>
<td><input type=text value="MSKU1425476"></b></td>
<td><input type=text value="2011.21.09"></b></td>
</tr>
 
</table>
</form>
</body>
  
</html>

То есть стрелками осуществляется переход по полям таблицы. Представим что пользователь просто хочет наслаждаться выбором.

@GuardCat · 07.12.2011, 17:09

Именно это я и сделал в предыдущий раз. В ваш пример мой код тоже встроился, но с одним ограничением: input должен находиться непосредственно в td, и не должен быть обрамлён в тег <b></b> (это, к тому же, бессмысленно). Если принципиальна непредсказуемая вложенность текстовых полей, нужно копать глубже.

Вот работающий пример на вашей (слегка скорректированной) разметке (я убрал ограничение на нажатый контрол и стрелками можно двигаться по ячейкам, хотя рекомендую раскомментировать строку и разрешить пользователю двигаться стрелками по тексту, а по ctrl-стрелкам по текстовым полям).

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
    <body>
        <form>
            <table border=1 bordercolor=blue>
                <tr>
                    <th>
                        КОД
                    </th>
                    <th>
                        КОНТЕЙНЕР
                    </th>
                    <th>
                        ETD
                    </th>
                </tr>
                <tr>
                    <td>
                        <input type=text value="1">
                    </td>
                    <td>
                        <input type=text value="MSKU7892546">
                    </td>
                    <td>
                        <input type=text value="2011.28.08">
                    </td>
                </tr>
                <tr>
                    <td>
                            <input type=text value="2">
                    </td>
                    <td>
                        <input type=text value="MSKU5896134">
                    </td>
                    <td>
                        <input type=text value="2011.23.07">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type=text value="3">
                    </td>
                    <td>
                        <input type=text value="MSKU1425476">
                    </td>
                    <td>
                        <input type=text value="2011.21.09">
                    </td>
                </tr>
            </table>
        </form>
           <script>
                window.document.onkeydown = function () {
                        startRefocus();
                }
                function startRefocus(event) {
                        event = event || window.event;
                        //if (!event.ctrlKey) return; 
                        var key = event.keyCode;
                        var targetElement = event.target || event.srcElement;
                        focusMe(targetElement, key);
                }
                function focusMe(input, key) {
                        var needFocusElement = true;
                        function detectColumn(td) {
                                var result = 0, x;
                                while (td = td.previousElementSibling) {
                                        ++result
                                }
                                return result;
                        }
                        try {
                                switch (key) {
                                        case 37:
                                                needFocusElement = input.parentNode.previousElementSibling.querySelector("input");
                                                break;
                                        case 39: 
                                                needFocusElement = input.parentNode.nextElementSibling.querySelector("input");
                                                break;
                                        case 38:
                                                needFocusElement = input.parentNode.parentNode.previousElementSibling.querySelectorAll("td")[detectColumn(input.parentNode)].querySelector("input");
                                                break;
                                        case 40: 
                                                needFocusElement = input.parentNode.parentNode.nextElementSibling.querySelectorAll("td")[detectColumn(input.parentNode)].querySelector("input");
                        break;
                    default:
                        needFocusElement = false;
                                } 
                        } catch (e) {
                                needFocusElement = false;
                        }
 
                        if (!needFocusElement) return;
                        needFocusElement.focus();
                }
        </script>
    </body>
 
</html>

@Сергей1980 · 07.12.2011, 17:27 **[ТС]**

Да, спасибо! это именно то что нужно!!!!

@Ципихович Эндрю · 07.12.2011, 17:41

Сообщение от Сергей1980

код более полный

если я не ошебаюсь стрелки с Контролом?
ну и что вверх вниз не работает, влево и вправо только в пределах ячейки
или у меня руки кривые или не стрелки с Контролом?

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .

@Сергей1980 547 / 377 / 16 Регистрация: 17.12.2009 Сообщений: 991

	Переход между полями формы/таблицы (не при помощи Tab) 01.12.2011, 20:42. Показов 13674. Ответов 12 Метки нет (Все метки) Добрый вечер всем! Возник вопрос по использованию клавиш ВВЕРХ/ВНИЗ/ВЛЕВО/ВПРАВО в качестве переходов между полями/таблицы формы в соответствующих направлениях. Можно ли это реализовать как нибудь средствами HTML/PHP? Или javascript? Чтобы к примеру не использовать клавишу TAB (tabindex) а использовать полноценное управление вверх вниз,влево вправо стрелками на клаве? это очень бы облегчило переходы между полями таблицы. 0

@Сергей1980 547 / 377 / 16 Регистрация: 17.12.2009 Сообщений: 991
	03.12.2011, 22:22 [ТС]
	Привет коллеги, никто не знает ответа на данный вопрос? 0

@parikmaher534 38 / 38 / 6 Регистрация: 16.11.2011 Сообщений: 112
	04.12.2011, 08:43
	Можно. Отслеживайте нажатие клавиш необходимых и эмулируйте onfocus на нужных элементах формы. Если юзаете jquery то все прозрачно эмуляция будет - ....focus(); На нативном event.initEvent -вот ссылка https://developer.mozilla.org/... .initEvent 0

@Сергей1980 547 / 377 / 16 Регистрация: 17.12.2009 Сообщений: 991
	04.12.2011, 13:32 [ТС]
	Спасибо за ссылку, буду пробовать.! 0

@Ципихович Эндрю 1711 / 578 / 76 Регистрация: 10.04.2009 Сообщений: 9,299
	04.12.2011, 19:08
	скажите пожалуйста в Вашем вопросе под формой какая имеется ввиду лучше сначала спросить как их по феншую правильно называть 1) форма сделанная на ХТМЛ 2) форма, та которая появляется посредине экрана и у неё есть в углу крестик для её закрытия Можно Вас попросить когда разберетесь выложите пример рабочий 0

@GuardCat Просто любитель 626 / 464 / 120 Регистрация: 20.01.2011 Сообщений: 865 Записей в блоге: 2
	07.12.2011, 15:47
	----- Сергей1980, подождите, а как вы собираетесь двигаться по ячейкам таблицы? Выделяя, например, цветом текущую ячейку? А для чего? Вот выделил я ячейку цветом, что я могу с ней сделать? Редактировать текст в ней или копировать содержимое? Или просто наслаждаться выбором? 0

@Сергей1980 547 / 377 / 16 Регистрация: 17.12.2009 Сообщений: 991
	07.12.2011, 17:27 [ТС]
	Да, спасибо! это именно то что нужно!!!! 0

Опции темы