Question

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

以下JQuery代码有助于找到按下的键，包括数字，小写和大写字母。但它并没有告诉我他是否使用左/右移位键作为大写字母

$(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脚本，以便每当按下大写字母时，我都可以检查他是否使用左移键或右移键

Answer 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;
    }
});

Answer 2

此处的其他解决方案并未涵盖保留两个换档键的边缘情况，这可能与您预期的不同。

从浏览器的角度来看，

要举行的第二个换班钥匙赢得重复的keydowns
要发布的第二个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));

然后说你键入左移 A ，上面会记录

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

然后说你键入右移 Z ，上面会记录

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

Answer 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>

在keypress中检测左或右Shift键 - JQuery

3 个答案: