Question

我一直在研究JavaScript屏幕键盘类的东西，仅用于实验。我想看看我是否能够检测到哪个键已被按下，并使相应的屏幕键盘按钮改变颜色，类似于许多在线触摸打字课程。我尝试了onkeydown命令的许多变体，但没有运气。

//doesn't seem to do anything.
document.getElementById("a").style.backgroundColor="#004f40";

Button的id就是它的值，例如/ A键是id="a"。

有人能给我任何关于如何做到这一点的想法吗？

Answer 1

这是一个在CSS中首先设置颜色并使用javascript addEventListener监听点击event并在点击时更改按钮颜色的示例，它还会删除附加的事件侦听器。

CSS

#a {
    background-color: yellow;
}

HTML

<button id="a">My Button</div>

的Javascript

document.getElementById("a").addEventListener("click", function onClick() {
    this.removeEventListener("click", onClick);

    this.style.backgroundColor = "#004f40";  
}, false);

在jsfiddle

上

此示例使用鼠标click事件，但您需要查看key events而不是鼠标，它可能是众多之一;例如keydown，keypress或keyup。

更新：以下是使用关键事件的一种可能解决方案。

CSS

button {
    background-color: yellow;
}

的Javascript

var start = 97,
    end = 122,
    button;

while (start <= end) {
    button = document.createElement("button");
    button.id = button.textContent = String.fromCharCode(start);
    document.body.appendChild(button);
    start += 1;
}

document.addEventListener("keypress", function onKeypress(evt) {
    var element = document.getElementById(String.fromCharCode(evt.charCode || evt.char));

    if (element) {
        document.addEventListener("keyup", function onKeyup() {
            document.removeEventListener("keyup", onKeyup);

            element.style.backgroundColor = "yellow";
        }, false);

        element.style.backgroundColor = "#004f40";
    }
}, false);

在jsfiddle

上

注意：这个例子绝不是完美的，它只是一个如何使用事件的例子。

更新：这是另一个示例，当按下并释放多个键时，使用所有3个事件来消除键盘反弹。（与上面的使用比较。）

CSS

button {
    background-color: yellow;
}
button:active {
    background-color: #004f40;
}

的Javascript

var start = 97,
    end = 122,
    button;

while (start <= end) {
    button = document.createElement("button");
    button.id = button.textContent = String.fromCharCode(start);
    document.body.appendChild(button);
    start += 1;
}

var keydown,
    keypress = [];

document.addEventListener("keydown", function onKeydown(e1) {
    keydown = e1;
}, false);

document.addEventListener("keypress", function onKeypress(e2) {
    var record = {
        "char": e2.char || e2.charCode,
            "key": keydown.key || keydown.keyCode || keyDown.which,
            "shiftKey": keydown.shiftKey,
            "metaKey": keydown.metaKey,
            "altKey": keydown.altKey,
            "ctrlKey": keydown.ctrlKey
    },
    element = document.getElementById(String.fromCharCode(e2.charCode || e2.char));

    if (element) {
        element.style.backgroundColor = "#004f40";
        keypress.push(record);
    }
}, false);

document.addEventListener("keyup", function onKeyup(e3) {
    var key = e3.key || e3.keyCode || e3.which;

    keypress.forEach(function (record) {
        if (record.key === key && record.shiftKey === e3.shiftKey && record.metaKey === e3.metaKey && record.altKey === e3.altKey && record.ctrlKey === e3.ctrlKey) {
            document.getElementById(String.fromCharCode(record.char)).style.backgroundColor = "yellow";
        }
    });
}, false);

在jsfiddle

上

注意：即使这不完美，因为它取决于匹配keydown和keypress事件的毫秒时间。

Answer 2

或者，您可以使用jQuery：

    $(".keyboardButton").mousedown(function(){
      $(this).css("background":"#Color-when-pressed");
    }

    $(".keyboardButton").mouseup(function(){
      $(this).css("background":"#Color-when-released");
    }

当然，分别更换颜色 Get jQuery

或纯CSS：

   .keyboardButton:active {
     background:#Color-when-pressed;
   }
   .keyboardButton {
     background:#Color-when-released;
   }

它可能是最好的，因为您不必为每个按钮编写代码，并且您可能已经为它们安装了CSS类。

如何在按键上更改按钮的背景颜色？

2 个答案: