Question

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

这是怎么回事：

按下普通键时，颜色会变为蓝色。
按下shift键时，颜色变为红色。
当按下shift键+一个键时，它们都将变为红色，当键被释放时它将恢复正常，但如果仍然按住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返回一个空字符串，这不是可打印字符。您需要为keypress事件添加逻辑以处理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);
        }
    }
};

防止改变正常的键盘：

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

这是Fiddle。这只适用于'a'或'shift'+'a'按下。

Javascript键盘，shift +键组合

1 个答案: