Переход между полями формы/таблицы (не при помощи 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

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

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

Новые блоги и статьи Все статьи Все блоги /
Отправка уведомления на почту при изменении наименования справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере изменения наименования типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .	Контроль уникальности заводского номера - вариант №2 Maks 24.03.2026 В отличие от предыдущего варианта добавлено прерывание циклов, также добавлены новые переменные для сохранения контекста ошибки перед прерыванием цикла: Процедура ПередЗаписью(Отказ, РежимЗаписи,. . .
SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++ 8Observer8 24.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip	Жизнь в неопределённости kumehtar 23.03.2026 Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .	Модель здравоСохранения: работники работают быстрее после её введения. anaschu 23.03.2026 geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .	Контроль уникальности заводского номера - вариант №1 Maks 23.03.2026 Алгоритм контроля уникальности заводского (или серийного) номера на примере нетипового документа выдачи шин для спецтехники с табличной частью, разработанного в конфигурации КА2. Данные берутся из. . .

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

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

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

@Ципихович Эндрю 1712 / 579 / 76 Регистрация: 10.04.2009 Сообщений: 9,328
	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 Сообщений: 993
	07.12.2011, 17:27 [ТС]
	Да, спасибо! это именно то что нужно!!!! 0