Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Горячиеклавиши на сайте (https://javascript.ru/forum/dom-window/74803-goryachieklavishi-na-sajjte.html)

Начинающий-Js-кодер 08.08.2018 18:44

Горячиеклавиши на сайте
 
Здравствуйте, хочу сделать возможным использование клавиш и сочетаний на сайте. Но не самому их назначать(например alt+shift+j действие1 и т.д.) а чтобы пользователь имея ряд сочетаний клавиш,каждой назначил свои действия из списка.
Например, есть сочетания: shift+ctrl+alt+o,shift+ctrl+alt+p и есть действия:действие1,действи 2.
Вася назначил для действия1 - shift+ctrl+alt+o,для действия2 - shift+ctrl+alt+p.
А Петр для дейтсвия1 выбрал shift+ctrl+alt+p,для действия2 - shift+ctrl+alt+o.

Возможно ли такое динамическое назначение клавиш или нет?

рони 08.08.2018 19:18

горячие клавиши shortcut js
 
Начинающий-Js-кодер,
дока
https://github.com/jeresig/jquery.hotkeys
демо
https://rawgit.com/jeresig/jquery.ho...static-01.html

дока
https://craig.is/killing/mice
https://github.com/blainekasten/shortcut.js

Начинающий-Js-кодер 08.08.2018 19:45

А будет ли так работать:
var arrayhotkey ={};

а в нем хранить "сочетание клавиш":"функция"
и вызывать так:
$(document).bind('keydown', elements[i], elements[i]());

или так не заработает?

рони 08.08.2018 22:19

mousetrap горячие клавиши
 
Начинающий-Js-кодер,
нажать ctrl+m+y


<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div.hot{
      width: 100px;
      height: 100px;
      border: 1px dashed Gray;
      padding: 5px;
  }
  .Red{
      background-color: Red;
  }
  .Green{
      background-color: Green;
  }
  .Yellow{
      background-color: Yellow;
  }
  </style>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.2/mousetrap.min.js"></script>
   <script>
document.addEventListener("DOMContentLoaded", function() {
    var arrayhotkey = {
        "ctrl+m+y": function(event) {
            event.preventDefault();
            alert("my")
        },
        "ctrl+b": function(event) {
            event.preventDefault();
            alert("b")
        }
    };
    var keys = "ctrl+m+y";
    Mousetrap(document).bind(keys, arrayhotkey[keys])
});
   </script>
</head>

<body>


<div class="hot Red"></div>
</body>

</html>

Начинающий-Js-кодер 08.08.2018 23:07

То есть для моего случая нужно:
1)чтобы var keys не заранее задавалась строка,а откуда-то получалась.
2)добавление,проверка на существование,удаление в массив arrayhotkey.

Хотел спросить,как динамически в arrayhotkey добавлять в значение функцию,чтобы не получилась обычная строка?Например есть function test1(),test2() как их добавить,а не все тело функции,чтобы было так:
var arrayhotkey = {

	        "ctrl+m+y": test1()
	        }
	    };

рони 08.08.2018 23:26

Начинающий-Js-кодер,
:-?
function test1(event) {};
arrayhotkey["ctrl+m+y"] = tes1;

Начинающий-Js-кодер 09.08.2018 08:55

Спасибо


Часовой пояс GMT +3, время: 02:38.