如何检测 javascript 文本字段中的 shift 按钮/清除输入？

Question

我有一个文本字段，我正在检测这样的每个按键：

document.getElementById("postcardText").addEventListener('keyup', checkInput, false);

在我的 checkInput 函数中，我只检查我希望用户添加的字母。到目前为止它工作正常，问题是如果用户按下 shift 按钮，例如shift+A 写一个大写字母 A 检测到 2 个键位并添加 A 两次。 任何人都可以提出解决方法吗？

编辑： 这似乎可以完成这项工作：

var shiftKey=false;
$(document).keyup(function (e) {
    if (e.keyCode == 16) {
        //alert("Shift was pressed");
        shiftKey=true;
    } else{
      shiftKey=false;
      checkInput();
    }
});

然后在我的 if 语句中是这样的

function checkInput(){
    if (character=="A" ||
        character=="B" &&
    shiftKey==false){
    //adding letter-image here
    }
}

我必须将 keydown 更改为 keyup，否则它不会立即检测到第一个字符，而只会在按下下一个键时检测到。

Answer 1

来自您的评论：

基本上，这是一个将输入文本转换为彩色图像的“机器”。所以每个字母都有一个代表它的图像。我希望用户在写作时已经看到它的样子。我在每个键盘上读取文本字段的数据，然后将最后一个字母作为图像添加到我的大图像中。但是换档按钮会干扰事情......

每次在 keyup 上都从头开始重建整个设计会不会太过分了？每次收到 keyup 事件时，擦除当前图像，并循环遍历文本字段的每个字符以添加其图像。

$(document).keyup(function (e) {

    // Do whatever you need to do to clear the image… 

    var myText = $("#postcardText").val();
    for (var i = 0; i < myText.length; i++) {

        var thisChar = myText.charAt(i);

        // Add thisChar to the image…
        addLetter(thisChar);
    }
});

此方法还有一个额外的好处，即您可以处理箭头键甚至删除，而无需为每种情况编写异常。

Answer 2

你在使用 jQuery 吗？如果是，您可以尝试使用以下方法拦截 shift 键：

$(document).keydown(function (e) {
    if (e.keyCode == 16) {
        alert("Shift was pressed");
    }
});

所以你可以返回false或者只有在keyCode不是16时才调用你的函数，看看here

Answer 3

试试这个，

if (character=="A" || character=="B"){
  if(shiftKey==false){
     //adding letter-image here
  }
}