HTML热键输入控件

时间:2019-07-19 02:33:35

标签: html input widget

是否有一个HTML小部件可以模拟Windows中本身具有this的热键输入控件?

基本上,我想向用户提供一个输入字段,让他们可以按所需的热键组合,然后将其存储在我的应用程序设置中。

编辑:忘记添加-该应用程序是使用Electron编写的。

谢谢

1 个答案:

答案 0 :(得分:0)

我也在进行电子应用,正在寻找是否有人已经解决了这个问题。显然不是。这是我最终在普通打字稿中使用的内容:

let hotkeyInput = <HTMLInputElement>document.getElementById("hotkey-input");
let modifiers = [
    "ShiftLeft",
    "ShiftRight",
    "ControlLeft",
    "ControlRight",
    "AltLeft",
    "AltRight",
    "AltLeft",
    "OSLeft",
    "MetaLeft",
    "MetaRight",
    "OSLeft",
    "OSRight",
];
hotkeyInput.addEventListener("keydown", function(event) {
    let key = event.code;
    if (key !== "Tab") {    // Allow tabbing through inputs
        event.preventDefault();    // Prevent generation of input events
        let hotkey = "";
        if (key === "Backspace") this.value = "";
        hotkey += event.shiftKey ? "Shift + " : "";
        hotkey += event.ctrlKey ? "Ctrl + " : "";
        hotkey += event.altKey ? "Alt + " : "";
        hotkey += event.metaKey ? "Meta + " : "";
        if (key.startsWith("Key")) key = key.slice(3);
        if (!modifiers.includes(key)) hotkey += key;
        // We only want key combinations
        if (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) this.value = hotkey;
    }
});

请注意,这假设hotkeyInput是普通的<input id="hotkey-input" type="text">