javascript - 如何检测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

来自您的评论:

basically this is a "machine" that transforms the input text into a colorful image. so each letter has a image that it is represented by. I want that the user while writing already sees how it looks like. I am on each keyup reading the data of the textfield and then adding the last letter as an image to my big image. but the shift-button disturbs things...

每次 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);
    }
});

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