【问题标题】:Get a list of all currently pressed keys in Javascript [duplicate]获取Javascript中所有当前按下的键的列表[重复]
【发布时间】:2012-11-30 06:21:50
【问题描述】:

在 Javascript 中,我想编写一个函数,该函数返回当前按下的所有键的列表(这样我就可以允许用户创建自定义键盘快捷键。)有没有办法获得所有当前按下的键的列表Javascript 中的键?

【问题讨论】:

标签: javascript


【解决方案1】:
  • 无论何时按下一个键,都会发送一个keydown 事件
  • 只要释放一个键,就会触发 keyup 事件

因此,您只需将键保存在数组中并检查您的组合是否正确。

示例

var keys = [];
window.addEventListener("keydown",
    function(e){
        keys[e.keyCode] = true;
        checkCombinations(e);
    },
false);

window.addEventListener('keyup',
    function(e){
        keys[e.keyCode] = false;
    },
false);

function checkCombinations(e){
    if(keys["a".charCodeAt(0)] && e.ctrlKey){
        alert("You're not allowed to mark all content!");
        e.preventDefault();
    }
}

请注意,您应该尽可能使用e.key 而不是e.keyCode(在本例中为var key = {},因为e.key 是一个字符串)。

【讨论】:

  • 场景:您按住/按住某个键并聚焦文档,单击 URL 框,然后松开该键。 keyup 从未被触发,但 key 已启动,导致列表不正确。
  • 什么是恶意的?浏览器应该提供一个按键列表。浏览器已经提供了按下的 GamePad 按钮列表。甚至操作系统也应该为应用程序提供一个按键列表。
  • @user3015682: "<x> 应该做<y>" 可能是一个解决方案,但在这种情况下您需要联系<x> 的开发人员; )。
  • @Zeta 至少如果你接触操作系统或浏览器,你只需要纠缠 2 或 3 个组织,而不是数百万为操作系统或浏览器平台开发的公司。此外,至少在 Windows 上,操作系统实际上确实为应用程序提供了键盘状态 - 所以它实际上只是一个浏览器问题。任何时候在基于 Windows 的 PC 游戏中发生这种情况,都是游戏自身的愚蠢错误
  • 这个答案绝不是可靠的。例如,当浏览器的焦点被拉开时,操作系统这样做并不少见。甚至 Chrome 也会允许一个页面从另一个页面拉出焦点(例如:日历通知)。这将破坏基于键盘事件的跟踪。您将拥有一个永远不会引发 keyup 事件的 keydown。顺便说一句,问题是如何获得按键列表。从一些信息中创建这个似乎与所要求的完全不同。
【解决方案2】:

在上一个答案的基础上改进,我写了一个演示,在 keydown 和 keyup 上打印按下的键列表。

Here it is on jsfiddle.

var keys = [];
document.body.innerHTML = "Keys currently pressed: "
window.addEventListener("keydown",
    function(e){
        keys[e.keyCode] = e.keyCode;
        var keysArray = getNumberArray(keys);
        document.body.innerHTML = "Keys currently pressed:" + keysArray;
        if(keysArray.toString() == "17,65"){
            document.body.innerHTML += " Select all!"
        }
    },
false);

window.addEventListener('keyup',
    function(e){
        keys[e.keyCode] = false;
        document.body.innerHTML = "Keys currently pressed: " + getNumberArray(keys);
    },
false);

function getNumberArray(arr){
    var newArr = new Array();
    for(var i = 0; i < arr.length; i++){
        if(typeof arr[i] == "number"){
            newArr[newArr.length] = arr[i];
        }
    }
    return newArr;
}
​

【讨论】:

  • 应该注意这有同样的限制:如果焦点离开,你永远不会得到 keyDown 事件。例如(Chrome):打开 JSFiddle,按Ctrl+D:触发书签。当你关闭它时,小提琴仍然会显示为按下,因为它没有得到 keyDown 事件。
猜你喜欢
  • 1970-01-01
  • 2018-04-12
  • 1970-01-01
  • 1970-01-01
  • 2023-01-10
  • 2010-10-08
  • 2017-05-08
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多