1

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

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

按钮的 id 就是它的值，例如 / A 键是id="a".

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

4

2 回答 2

1

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

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 上

此示例使用鼠标单击事件，但您需要查看键事件而不是鼠标事件，它可能是众多事件之一；例如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 事件的毫秒时间。

于 2013-05-12T14:38:06.050 回答
-1

或者，您可以使用jQuery：

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

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

当然，分别更换颜色。
获取 jQuery

或纯 CSS：

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

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

于 2013-05-12T14:47:01.300 回答