检测按键中的左移或右移键 - JQuery答案

【问题标题】：Detect Left or Right Shift Key in keypress - JQuery检测按键中的左移或右移键 - JQuery
【发布时间】：2016-10-30 02:04:46
【问题描述】：

我正在开发一个用户必须输入大写字母的网络应用程序。我已经限制他们对某些键使用右移键，如 a、s、d、f 和左移键用于 h、j、k、l（基本上是为了检测用户是否使用正确的大写字母移位键）

下面的 JQuery 代码有助于查找按下了哪个键，包括数字、大小写字母。但它并没有告诉我他是否使用了大写字母的左/右shift键

$(document).keypress(function(event){
  alert(String.fromCharCode(event.which));
});

经过大量搜索，我找到了一个代码来检查检测左/右移键

document.addEventListener("keyup", function(e){
 var key = e.key + e.location;
 if(key == "Shift1")
   alert('Left shift key');
 if(key == "Shift2")
   alert('Right shift key');
});

如何修改 JQuery 脚本，以便每当按下大写字母时，我可以检查他是使用左移键还是右移键

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

你想检查一个键是否被按下并将按下的键存储在一个关联数组中，并在按下其他键时检查它们是否为真，所以：

var pressedKeys = [];
var shift1Keys = []; //array of keys that are valid for shift1;
var shift2Keys = []; //array of keys that are valid for shift2;

document.addEventListener("keydown", function(e){
    var key = e.key + e.location;

    if(key === "Shift1") {
        pressedKeys['shift1'] = true;
    } else if(key === "Shift2") {
        pressedKeys['shift2'] = true;
    } else {
        pressedKeys[key] = true;

        if(pressedKeys['shift1'] && shift1keys.indexOf(key) !== -1) {
            alert('shift1 and key pressed');
        } else if (pressedKeys['shift2'] && shift2keys.indexOf(key) !== -1) {
            alert('shift2 and key pressed');
        }
    }
});

document.addEventListener("keyup", function(e){
    var key = e.key + e.location;

    if(key == "Shift1") {
        pressedKeys['shift1'] = false;
    } else if(key == "Shift2") {
        pressedKeys['shift2'] = false;
    } else {
        pressedKeys[key] = false;
    }
});

【讨论】：

它的代码并不完美。它旨在为您指明前进的方向。
我不知道你为什么要这样做 key = e.key + e.location，这取决于你找出小问题是什么，因为我没有你的代码或你的目标.
好的。我现在正在按照您给我的逻辑构建它。正在努力
祝你好运。

【解决方案2】：

此处的其他解决方案不涵盖同时按住两个 shift 键的边缘情况，这可能与您预期的不同。

从浏览器的角度来看，

要按住的第二个 shift 键赢得重复按键
要释放的第二个 shift 键赢得 keyup

这意味着要匹配你应该丢弃每个位置上的先前位置的行为，这里是这样一个实现的例子，它只记录当键在旁边使用时 Shift

function tellMeWhere(type, e, meta) {
    if (e.shiftKey) {
        console.log(e.key, type + '\'d', 'with Shift', meta.Shift)
    }
}

(function (callback) {
    var metaKeyList = ['Alt', 'Control', 'Meta', 'Shift'],
        metaKeys = {};
    window.addEventListener('keydown', function (e) {
        if (metaKeyList.indexOf(e.key) !== -1) {
            metaKeys[e.key] = e.location;
        } else {
            callback('down', e, Object.assign({}, metaKeys));
        }
    });
    window.addEventListener('keypress', function (e) {
        if (metaKeyList.indexOf(e.key) === -1) {
            callback('press', e, Object.assign({}, metaKeys));
        }
    });
    window.addEventListener('keyup', function (e) {
        if (metaKeyList.indexOf(e.key) !== -1) {
            delete metaKeys[e.key];
        } else {
            callback('up', e, Object.assign({}, metaKeys));
        }
    });
}(tellMeWhere));

然后说你输入了Left ShiftA，上面会记录

A down'd with Shift 1
A press'd with Shift 1
A up'd with Shift 1

然后说你输入了Right ShiftZ，上面会记录

Z down'd with Shift 2
Z press'd with Shift 2
Z up'd with Shift 2

【讨论】：

【解决方案3】：

在@Micheal Nakayama 的帮助下，我自己做了。代码如下：

<script>
var shiftLeft
var shiftRight
document.addEventListener("keydown", function(e){
  var key = e.key + e.location;
  if(key=="Shift1")
  {
    shiftLeft = 1
  }
  else if(key=="Shift2")
  {
    shiftRight = 1
  }
  else if(shiftLeft==1)
  {
    console.log("Left+"+e.key)
  }
  else if(shiftRight==1)
  {
    console.log("Right+"+e.key)
  }
  else {
    console.log(e.key)
  }
});
document.addEventListener("keyup", function(e){
  var key = e.key + e.location;
  if(key=="Shift1")
  {
    shiftLeft = 0
  }
  else if(key=="Shift2")
  {
    shiftRight = 0
  }
});
</script>

【讨论】：