Jump to content

Захватить нажатые клавиши с клавиатуры


DobroFenix
 Share

Recommended Posts

Добрый день или ночь или вечер или утро, Уважаемые Знатоки!

Помогите пожалуйста реализовать вот такую задумку:

Хочется, чтобы на web-странице работал js-скрипт, который бы "захватывал" нажатые пользователем клавиши, а по нажатию клавиши ENTER происходила бы отправка нажатых клавиш POST/GET запросом.

Link to comment
Share on other sites

Ковырял несколько примеров. В интернете имеется 2 основных варианта: отображение нажатой клавиши и триггер, реагирующий на нажатую комбинацию двух клавиш.

<html>
<head>
<title>Отслеживание нажатия клавиш на JAVASCRIPT</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

<script language="javascript" type="text/javascript">
    document.onkeydown = function checkKeycode(event)
    {
        var keycode;
        if(!event) var event = window.event;
        if (event.keyCode) keycode = event.keyCode; // для IE
        else if(event.which) keycode = event.which; // для всех браузеров
        
        alert("keycode: "+keycode); // Выводим сообщение
        
        // Тут можно написать функции при нажатии нужных клавиш
    }
</script>

</body>
</html>

 

Проблема в том, чтобы захватить все нажатые пользователем клавиши в одну переменную и затем обработать(отправить) эту переменную дальше.

Link to comment
Share on other sites

Посмотрел алертом, что хранится в keycodes

if(keycode === 13) {
        // make Post/Get request
        alert("keycode: "+keycodes); // Выводим сообщение
        console.log('Request to server');
    } 

Получается, что там комбинации клавиш, а как получить в итоге результат, чтобы были именно символы и числа?

И чтобы вывод был без запятой -- все набранные символы слитно в одной переменной.

По сути мне нужны только цифры. Перевод сделал вот так, а как убрать запятую на выводе между элементами?

Spoiler

var keycodes = [];
var real_keys = [];
document.onkeydown = function checkKeycode(event) {
    var keycode;
    if (!event) var event = window.event;
    if (event.keyCode) keycode = event.keyCode; // для IE
    else if (event.which) keycode = event.which; // для всех браузеров


    if(keycode === 13) {
        // make Post/Get request
        alert("keycode: "+real_keys); // Выводим сообщение
        console.log('Request to server');
    } else {
        keycodes[keycodes.length] = keycode;
            if(keycode == 48) {
                real_keys[real_keys.length] = 0;
            }
            if(keycode == 49) {
                real_keys[real_keys.length] = 1;
            }
            if(keycode == 50) {
                real_keys[real_keys.length] = 2;
            }
            if(keycode == 51) {
                real_keys[real_keys.length] = 3;
            }
            if(keycode == 52) {
                real_keys[real_keys.length] = 4;
            }
            if(keycode == 53) {
                real_keys[real_keys.length] = 5;
            }
            if(keycode == 54) {
                real_keys[real_keys.length] = 6;
            }
            if(keycode == 55) {
                real_keys[real_keys.length] = 7;
            }
            if(keycode == 56) {
                real_keys[real_keys.length] = 8;
            }
            if(keycode == 57) {
                real_keys[real_keys.length] = 9;
            }
        
    }

    console.log("keycodes: " + keycodes); // Выводим сообщение

}

 

 

Link to comment
Share on other sites

Большое спасибо =)

Вот делюсь рабочим вариантом:

Дальше на php парсим переменную и работаем с ним, удаляя запятые и форматирую как нам нужно

Spoiler

<script language="javascript" type="text/javascript">
var keycodes = [];
var real_keys = [];
document.onkeydown = function checkKeycode(event) {
    var keycode;
    if (!event) var event = window.event;
    if (event.keyCode) keycode = event.keyCode; // для IE
    else if (event.which) keycode = event.which; // для всех браузеров


    if(keycode === 13) {
        // make Post/Get request
        $.post('/food/get_xml.php', {xml: real_keys });
        alert("keycode: "+real_keys); // Выводим сообщение
        console.log('Request to server');
    } else {
        keycodes[keycodes.length] = keycode;
            if(keycode == 48) {
                real_keys[real_keys.length] = 0;
            }
            if(keycode == 49) {
                real_keys[real_keys.length] = 1;
            }
            if(keycode == 50) {
                real_keys[real_keys.length] = 2;
            }
            if(keycode == 51) {
                real_keys[real_keys.length] = 3;
            }
            if(keycode == 52) {
                real_keys[real_keys.length] = 4;
            }
            if(keycode == 53) {
                real_keys[real_keys.length] = 5;
            }
            if(keycode == 54) {
                real_keys[real_keys.length] = 6;
            }
            if(keycode == 55) {
                real_keys[real_keys.length] = 7;
            }
            if(keycode == 56) {
                real_keys[real_keys.length] = 8;
            }
            if(keycode == 57) {
                real_keys[real_keys.length] = 9;
            }
        
    }

    console.log("keycodes: " + keycodes); // Выводим сообщение

}

 

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy