Javascript 键盘，Shift + 组合键

Question

我正在使用 vanilla Javascript 创建一个屏幕键盘，我试图在物理键盘上按下相同的键时更改屏幕键盘键的颜色。到目前为止，一切都很好。问题是，我正在使用 keyup 和 keydown，但我似乎无法正确使用 shift-combos。

接下来会发生什么:

• 当按下普通键时，它会将颜色变为蓝色。
• 当按下 shift 键时，它的颜色变为红色。
• 当按下 shift 键 + a 键时，它们都会变成红色，当松开键时它会恢复正常，但如果仍然按住 shift 键它会红色。

问题:当按下 shift 键 + 普通键时，如果我松开普通键，两个按钮上的颜色都会消失，即使仍然按下 shift 键。

到目前为止，这是我的代码:

farge1 = ' key-pressed';
farge2 = ' shift-pressed';
shift = false;




var klikk = function(e) {
e = e || window.event;
var k = e.keyCode || e.which;

if (k === 13) {
    document.getElementById('enter').className += (farge1);
} else if (k === 8) {
    document.getElementById('backspace').className += (farge1);
} else if (k === 16) {
    document.getElementById('shift-right').className += (farge2);
    document.getElementById('shift-left').className += (farge2);
    shift = true;
}

};

var bokstav = function(e) {
e = e || window.event;
var b = String.fromCharCode(e.which).toLowerCase();

if (shift === true) {
    document.getElementById(b).className += (farge2);
} else {
    document.getElementById(b).className += (farge1);
}
};


var slipp = function(e) {
e = e || window.event;
var k = e.keyCode || e.which;
var b = String.fromCharCode(e.which).toLowerCase();

document.getElementById('enter').className = ("");
document.getElementById('backspace').className = ("");

document.getElementById(b).className = ("");
if (k !== 16) {
    document.getElementById('shift-left').className = ("");
    document.getElementById('shift-right').className = ("");
}
shift = false;

};


document.onkeypress = bokstav;
document.onkeydown = klikk;
document.onkeyup = slipp;

我对此完全陌生.. 没有 jQuery

Answer 1

您的代码中有错误，这是由按键事件引起的。只要您按住 shift 键，该事件就会持续触发。但是，String.fromCharCode(e.which) 将始终为 Shift 返回空字符串，这不是可打印字符。您需要向按键事件添加逻辑以处理 shift:

var bokstav = function(e) {
    e = e || window.event;
    var b = String.fromCharCode(e.which).toLowerCase();

    if (b) { // make sure b has a value
        if (shift === true) {
            document.getElementById(b).className += (farge2);
        } else {
            document.getElementById(b).className += (farge1);
        }
    }
};

为了防止 shift 在正常的 keyup 上改变:

document.getElementById(b).className = ("");
if (k === 16) {
    document.getElementById('shift-left').className = ("");
    document.getElementById('shift-right').className = ("");
    shift = false;
} 

这是一个Fiddle .这仅适用于 'a' 或 'shift' + 'a' 按键。