时间戳

首页 > 解决方案 > 从对象动态设置 Mousetrap.bind() 组合键

javascript - 从对象动态设置 Mousetrap.bind() 组合键

问题描述

我正在从我们的后端取回包含键盘快捷键信息的数据。这是我将收到的内容的简化版本：

    { code: "r", message: "test R" },
    { code: "s", message: "test S" },
    { code: "c", message: "test C"}

“代码”指定哪个键将激活键盘快捷键，消息将粘贴在输入框中。

我正在使用Mousetrap库，它允许我编写如下函数：

Mousetrap.bind('shift+^+r', function () {
    alert("test");
});

我的问题是：有没有办法在运行时根据带回的数据编写这些函数？因此，对于 JSON 对象中的每个项目，都需要一个函数来处理快捷方式。

我试过这个：

    var html = document.getElementById("shortcuts").innerHTML;
    document.getElementById("shortcuts").innerHTML = html + "<script> Mousetrap.bind('shift+^+r', function () { alert('test) })); <\/script>"

我不知道这是否是一种好的做法，因为我对 JS 还是很陌生，但这是我唯一能想到的。但它不起作用。

标签： javascriptmousetrap

解决方案

当然。听起来很容易。只需创建一个接受对象的单独函数，同时获取code和message属性并Mousetrap.bind(str, func)在运行时调用

function bindKey(input){
    const code = input.code;
    const message = input.message;

    const bindStr = "shift+^+" + code; //idk if you need shift here but modify as needed

    Mousetrap.bind(bindStr, function(){
          alert(message);
    });
}

通过使用

bindKey({code: "r", message: "test R"});
bindKey({code: "c", message: "test C"});
bindKey({code: "d", message: "test D"});

如果你有一个对象数组，只需遍历它们并调用bindKey()

myArray.forEach(bindKey);
// or
for (const i of myArray) bindKey(i);

无需编写脚本元素。只需编写函数并在运行时调用它。为什么需要渲染脚本标签超出了我的范围。

下面测试

function bindKey(input){
   const code = input.code;
   const message = input.message;

   const bindStr = "shift+^+" + code; //idk if you need shift here but modify as needed
    
    Mousetrap.bind(bindStr, function(){
          console.log(message);
    });
}
    
bindKey({code: "r", message: "test R"});
bindKey({code: "c", message: "test C"});
bindKey({code: "d", message: "test D"});
<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.min.js"></script>

推荐阅读