Обработка событий клавиатуры

@lepsky · Регистрация: 17.07.2015

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

Всем ДОброго вечера!
Есть необходимость сделать кроссворд на сайте. Задумка сделать таблицу <table> итд.. в ячейки вставить поля <input type="text"> с ограничением в один символ... В стилях сделать поля квадратные..... Получится что то вроде этого... С этим проблем нет.

Вопрос заключается в том, как сделать чтобы при нажатии клавиши, курсор перемещался в следующие поле? При нажатии "Backspace" удалял символ и возвращался в предыдущее поле? И возможность перемещать курсор стрелками? Буду благодарен за любую помощь. Ссылки, книги, куски кода... Или может кто знает, где можно взять подобный готовый, можно за символическую плату.

@kalabuni · 18.07.2015, 07:13

сэкономлю ваши денежки

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
42
<html>
<head>
<style>
#tbl {border-collapse: collapse}
#tbl input {width: 4ex; height: 4ex; text-align: center; border: none}
</style>
 
<script>
onload = function ()
{
var t = document.getElementById ('tbl'), inp = t.getElementsByTagName ('input');
for (var j = 0, J = inp.length; j < J; j++)
inp [j].onkeydown = function (e)
   {
   var e = e || window.event, k = e.keyCode;
   if (k > 36 && k < 41)
      {
      var o = this;   
      while (o.tagName != 'TABLE')
         {
         if (o.tagName == 'TD') ce = o.cellIndex;
         if (o.tagName == 'TR') ro = o.rowIndex;
         o = o.parentNode;
         }
      if (k == 37 && ce) ce--;
      if (k == 38 && ro) ro--;
      if (k == 39 && ce < t.rows [ro].cells.length - 1) ce++;
      if (k == 40 && ro < t.rows.length - 1) ro++;
      t.rows [ro].cells [ce].getElementsByTagName ('input') [0].focus ();
      }
   }
}
</script>
<head>
<body>
 
<table cellpadding="0" cellspacing="0" id="tbl" border>
 
<tr><td><input maxlength="1"></td><td><input maxlength="1"></td><td><input maxlength="1"></td></tr>
<tr><td><input maxlength="1"></td><td><input maxlength="1"></td><td><input maxlength="1"></td></tr>
</table>
</html>

@lepsky · 18.07.2015, 10:27 **[ТС]**

Сообщение от kalabuni

сэкономлю ваши денежки

Огроменное спасибо!

@barbarian77 · 29.07.2015, 07:34

А на сколько этот код можно приспособить для работы с таблицей, если ее вывод идет средствами PHP, или надо переносить вывод на javascript?

@kalabuni · 29.07.2015, 10:54

Сообщение от barbarian77

если ее вывод идет средствами PHP

javascript работает с HTML-элементами страницы -- в данном случае с тегами TABLE, TR, TD и INPUT

то, каким образом сформирован код этих тегов -- с помощью PHP или без оного -- совершенно никакой роли не играет

@barbarian77 · 29.07.2015, 12:21

Я наверное тогда не совсем понял. Но если я вставляю таблицу не в теле php, то у меня все прекрасно работает, проверил на вашем примере, но таблица которая выводится в теле php, скрипт на ней не работает. Что я не так делаю?

@kalabuni · 29.07.2015, 12:30

я не в курсе, что такое "тело PHP" -- выложите здесь код с этим самым "телом", с таблицей и скриптом

@barbarian77 · 29.07.2015, 12:50

<!doctype html>
<html>
<head>
<meta name="description" content="website information system on species radiolarian">
<meta name="keywords" content="Радиолярия, Радиолярии, Radiolaria, Agarkov, Агарков, База данных, Infomation system, biodiversity, Acaeniotyle, Acanthocircus, Acanthosphaera, Actinomma, Albaillella, Archaeodictyomitra">
<meta charset="utf-8">
<title>база php</title>
<style>

@import url("http://biodiversite.ru/css/table.css");
</style>
<script>
onload = function ()
{
var t = document.getElementById ('tbl'), inp = t.getElementsByTagName ('input');
for (var j = 0, J = inp.length; j < J; j++)
inp [j].onkeydown = function (e)
{
var e = e || window.event, k = e.keyCode;
if (k > 36 && k < 41)
{
var o = this;
while (o.tagName != 'TABLE')
{
if (o.tagName == 'TD') ce = o.cellIndex;
if (o.tagName == 'TR') ro = o.rowIndex;
o = o.parentNode;
}
if (k == 37 && ce) ce--;
if (k == 38 && ro) ro--;
if (k == 39 && ce < t.rows [ro].cells.length - 1) ce++;
if (k == 40 && ro < t.rows.length - 1) ro++;
t.rows [ro].cells [ce].getElementsByTagName ('input') [0].focus ();
}
}
}
</script>
</head>

<body>
<div>
<h4>

</h4>
<form method="post" action="allrad3.php">
<p>Enter the name of the genus and species or a part of it:
<input type="text" name="res1">
<input type="text" name="res2">
<p>Enter the Author or a part of it:
<input type="text" name="res3">
<input type="submit">
</form>
<h1>
<a href="http://biodiversite.ru/forum2/index.php">Forum about Bases</a>
<a href="http://biodiversite.ru/index.html">Home</a>
<p align="center">List of Species</p></h1>
</div>
<div>

<?php
$result=$_POST["res"];
$result2=$_POST["res2"];
$result3=$_POST["res3"];
require "../connect.php";
$link = mysqli_connect($host, $user, $password, $database)
or die("Ошибка " . mysqli_error($link));
$l="%";
$res=$l.$result.$l;
$res2=$l.$result2.$l;
$res3=$l.$result3.$l;
?>

<table id="tbl">

<tr><td><input maxlength="1"></td><td><input maxlength="1"></td><td><input maxlength="1"></td></tr>
<tr><td><input maxlength="1"></td><td><input maxlength="1"></td><td><input maxlength="1"></td></tr>
</table>
До вот этой части все прекрасно работает, появляется табличка и курсор по ней бегает
Далее у меня идет
<?php
$name="tabele001.F001007, tabele001.F001005, tabele001.F008203, tabele001.F002002, tabele001.F001107, hierarch.zoobionta_lat_ ";
$query ="SELECT $name
FROM hierarch RIGHT JOIN tabele001 ON hierarch.f008001=tabele001.f008001
WHERE `F001007` LIKE '$res' AND `F001005` LIKE '$res2' AND `F002002` LIKE '$res3' ORDER BY tabele001.F001007, tabele001.F001005";

$result = mysqli_query($link, $query) or die("Ошибка " . mysqli_error($link));

if($result)
{
$rows = mysqli_num_rows($result); // количество полученных строк

echo "Total records:";
echo $rows;
echo "<table id="tbl""><tr><th>Genus</th><th>Species</th><th>F008203</th><th>Author</th><th>Old

тут я так понимаю надо присвоить id="tbl", что бы код заработал.
но он выдает ошибку:

Parse error: syntax error, unexpected 'tbl' (T_STRING), expecting ',' or ';' in /home/users/a/aagarkov77/domains/biodiversite.ru/radiolarian/allrad3.php on line 96

genus</th><th>Name of record</th></tr>";
for ($i = 0 ; $i < $rows ; ++$i)
{
$row = mysqli_fetch_row($result);
echo "<tr>";
for ($j = 0 ; $j < 6 ; ++$j) echo "<td>$row[$j]</td>";
echo "</tr>";
}
echo "</table>";
}

mysqli_close($link);

?>

</div>
</body>
</html>
Этим я и подразумиваю, что в не <?php все работает, а внутри этого тега нет.
Если сможете, помогите разобраться.

@arcmag · 29.07.2015, 13:02

Хмм по моему этот JS в вашему случае работать не будет, ведь обработчик события нажатия клавиш вешается на элементы input которых как я понимаю у вас вообще нету...

@barbarian77 · 29.07.2015, 13:06

Да input у меня нет. У меня задача, что бы перемещаясь стрелками по строкам таблицы срабатывал другой запрос, беря данные из столбца с кодом.

@arcmag · 29.07.2015, 13:12

Ну вот попробуйте вот этот код подцепить...
Тут я скопипастил и немного своего добавил, надеюсь меня не засудят за авторские права...
(главное что бы у вашей таблицы был id='cDB')

PHP/HTML
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
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{margin:0px; padding:0px; box-sizing:border-box; -moz-box-sizing:border-box; user-select:none; -webkit-user-select:none;}
.wrapperTab{width:1100px; margin:10px auto; overflow:auto; height:700px;}
#cDB{width:100%;margin:10px auto;border-collapse:collapse;}
#cDB td{padding:5px;border:solid 1px #999999;background:#CCC;}
#cDB .active{color:#FFF;background:#666;}
</style>
<script type="text/javascript">
window.addEventListener("load", function(){
    var table = document.getElementById("cDB");
    document.addEventListener("keydown", function(e){
        if(!document.getElementsByClassName("active")[0]) return;
        var key = e.keyCode, maxY = table.rows.length - 1, maxX = table.rows[0].cells.length - 1, x, y;
        var o = document.getElementsByClassName("active")[0];
        o.classList.remove("active");
        while(o.tagName!="TABLE"){
            if(o.tagName == 'TD') x = o.cellIndex;
            if(o.tagName == 'TR') y = o.rowIndex;
            o = o.parentNode;
        }
        if((key==87||key==38)&&0<=y-1) y--;
        else if((key==68||key==39)&&maxX>=x+1) x++;
        else if((key==83||key==40)&&maxY>=y+1) y++;
        else if((key==65||key==37)&&0<=x-1) x--;
        table.rows[y].cells[x].classList.add("active");
    });
    var td = table.getElementsByTagName("td");
    for(var i = 0; i<td.length; i++) 
        td[i].addEventListener("click", function(){
            if(document.getElementsByClassName("active")[0]) document.getElementsByClassName("active")[0].classList.remove("active");
            this.classList.add("active");
        });
});
</script>
</head>
<body>
    <div class="wrapperTab">
<!--тут ваш php код выводящий табличку-->
    </div>
</body>
</html>

@barbarian77 · 29.07.2015, 20:55

Тут еще в другом загвоздка, при установке
<table id="tbl">
Выдает ошибку
Parse error: syntax error, unexpected 'tbl' (T_STRING), expecting ',' or ';' in /home/users/a/aagarkov77/domains/biodiversite.ru/radiolarian/allrad3.php on line 96

Добавлено через 1 час 36 минут
Бинго, получилось. Теперь надо причесывать все это дело.
С меня магарыч!

Добавлено через 18 минут
Еще один небольшой вопросик, за счет чего могут быть такие тормоза?

Добавлено через 5 часов 43 минуты
Я так понял в этом коде воспринимаются только ячейки, а каким образом можно из ячейки, на которой стоит курсор внести информацию в переменную?

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .

@lepsky 0 / 0 / 0 Регистрация: 17.07.2015 Сообщений: 3

	Обработка событий клавиатуры 17.07.2015, 20:32. Показов 3295. Ответов 11 Метки нет (Все метки) Всем ДОброго вечера! Есть необходимость сделать *кроссворд* на сайте. Задумка сделать таблицу <table> итд.. в ячейки вставить поля <input type="text"> с ограничением в один символ... В стилях сделать поля квадратные..... Получится что то вроде этого... С этим проблем нет. Вопрос заключается в том, как сделать чтобы при нажатии клавиши, курсор перемещался в следующие поле? При нажатии "Backspace" удалял символ и возвращался в предыдущее поле? И возможность перемещать курсор стрелками? Буду благодарен за любую помощь. Ссылки, книги, куски кода... Или может кто знает, где можно взять подобный готовый, можно за символическую плату. 0

@barbarian77 0 / 0 / 1 Регистрация: 16.02.2015 Сообщений: 25
	29.07.2015, 07:34
	А на сколько этот код можно приспособить для работы с таблицей, если ее вывод идет средствами PHP, или надо переносить вывод на javascript? 0

@barbarian77 0 / 0 / 1 Регистрация: 16.02.2015 Сообщений: 25
	29.07.2015, 12:21
	Я наверное тогда не совсем понял. Но если я вставляю таблицу не в теле php, то у меня все прекрасно работает, проверил на вашем примере, но таблица которая выводится в теле php, скрипт на ней не работает. Что я не так делаю? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	29.07.2015, 12:30
	я не в курсе, что такое "тело PHP" -- выложите здесь код с этим самым "телом", с таблицей и скриптом 0

@barbarian77 0 / 0 / 1 Регистрация: 16.02.2015 Сообщений: 25
	29.07.2015, 12:50
	<!doctype html> <html> <head> <meta name="description" content="website information system on species radiolarian"> <meta name="keywords" content="Радиолярия, Радиолярии, Radiolaria, Agarkov, Агарков, База данных, Infomation system, biodiversity, Acaeniotyle, Acanthocircus, Acanthosphaera, Actinomma, Albaillella, Archaeodictyomitra"> <meta charset="utf-8"> <title>база php</title> <style> @import url("http://biodiversite.ru/css/table.css"); </style> <script> onload = function () { var t = document.getElementById ('tbl'), inp = t.getElementsByTagName ('input'); for (var j = 0, J = inp.length; j < J; j++) inp [j].onkeydown = function (e) { var e = e \|\| window.event, k = e.keyCode; if (k > 36 && k < 41) { var o = this; while (o.tagName != 'TABLE') { if (o.tagName == 'TD') ce = o.cellIndex; if (o.tagName == 'TR') ro = o.rowIndex; o = o.parentNode; } if (k == 37 && ce) ce--; if (k == 38 && ro) ro--; if (k == 39 && ce < t.rows [ro].cells.length - 1) ce++; if (k == 40 && ro < t.rows.length - 1) ro++; t.rows [ro].cells [ce].getElementsByTagName ('input') [0].focus (); } } } </script> </head> <body> <div> <h4> </h4> <form method="post" action="allrad3.php"> <p>Enter the name of the genus and species or a part of it: <input type="text" name="res1"> <input type="text" name="res2"> <p>Enter the Author or a part of it: <input type="text" name="res3"> <input type="submit"> </form> <h1> <a href="http://biodiversite.ru/forum2/index.php">Forum about Bases</a> <a href="http://biodiversite.ru/index.html">Home</a> <p align="center">List of Species</p></h1> </div> <div> <?php $result=$_POST["res"]; $result2=$_POST["res2"]; $result3=$_POST["res3"]; require "../connect.php"; $link = mysqli_connect($host, $user, $password, $database) or die("Ошибка " . mysqli_error($link)); $l="%"; $res=$l.$result.$l; $res2=$l.$result2.$l; $res3=$l.$result3.$l; ?> <table id="tbl"> <tr><td><input maxlength="1"></td><td><input maxlength="1"></td><td><input maxlength="1"></td></tr> <tr><td><input maxlength="1"></td><td><input maxlength="1"></td><td><input maxlength="1"></td></tr> </table> До вот этой части все прекрасно работает, появляется табличка и курсор по ней бегает Далее у меня идет <?php $name="tabele001.F001007, tabele001.F001005, tabele001.F008203, tabele001.F002002, tabele001.F001107, hierarch.zoobionta_lat_ "; $query ="SELECT $name FROM hierarch RIGHT JOIN tabele001 ON hierarch.f008001=tabele001.f008001 WHERE `F001007` LIKE '$res' AND `F001005` LIKE '$res2' AND `F002002` LIKE '$res3' ORDER BY tabele001.F001007, tabele001.F001005"; $result = mysqli_query($link, $query) or die("Ошибка " . mysqli_error($link)); if($result) { $rows = mysqli_num_rows($result); // количество полученных строк echo "Total records:"; echo $rows; echo "<table id="tbl""><tr><th>Genus</th><th>Species</th><th>F008203</th><th>Author</th><th>Old тут я так понимаю надо присвоить id="tbl", что бы код заработал. но он выдает ошибку: Parse error: syntax error, unexpected 'tbl' (T_STRING), expecting ',' or ';' in /home/users/a/aagarkov77/domains/biodiversite.ru/radiolarian/allrad3.php on line 96 genus</th><th>Name of record</th></tr>"; for ($i = 0 ; $i < $rows ; ++$i) { $row = mysqli_fetch_row($result); echo "<tr>"; for ($j = 0 ; $j < 6 ; ++$j) echo "<td>$row[$j]</td>"; echo "</tr>"; } echo "</table>"; } mysqli_close($link); ?> </div> </body> </html> Этим я и подразумиваю, что в не <?php все работает, а внутри этого тега нет. Если сможете, помогите разобраться. 0

@arcmag 347 / 322 / 203 Регистрация: 27.06.2014 Сообщений: 762
	29.07.2015, 13:02
	Хмм по моему этот JS в вашему случае работать не будет, ведь обработчик события нажатия клавиш вешается на элементы input которых как я понимаю у вас вообще нету... 0

@barbarian77 0 / 0 / 1 Регистрация: 16.02.2015 Сообщений: 25
	29.07.2015, 13:06
	Да input у меня нет. У меня задача, что бы перемещаясь стрелками по строкам таблицы срабатывал другой запрос, беря данные из столбца с кодом. 0

@barbarian77 0 / 0 / 1 Регистрация: 16.02.2015 Сообщений: 25
	29.07.2015, 20:55
	Тут еще в другом загвоздка, при установке <table id="tbl"> Выдает ошибку Parse error: syntax error, unexpected 'tbl' (T_STRING), expecting ',' or ';' in /home/users/a/aagarkov77/domains/biodiversite.ru/radiolarian/allrad3.php on line 96 Добавлено через 1 час 36 минут Бинго, получилось. Теперь надо причесывать все это дело. С меня магарыч! Добавлено через 18 минут Еще один небольшой вопросик, за счет чего могут быть такие тормоза? Добавлено через 5 часов 43 минуты Я так понял в этом коде воспринимаются только ячейки, а каким образом можно из ячейки, на которой стоит курсор внести информацию в переменную? 0

Обработка событий клавиатуры

Решение