Wie kann ich den hintergrund ändern die Farbe der Taste auf-Taste zu drücken?

Ich habe mit JavaScript on-screen-Tastatur, die Art der Sache, nur für Experimente. Ich wollte sehen, ob ich erkennen könnte, welche Taste gedrückt wurde und die entsprechende on-screen-Tastatur-Taste ändern Sie die Farbe, ähnlich wie viele online-touch-Eingabe-Kurse haben.
Ich habe versucht, viele Variationen der onkeydown Befehl, aber kein Glück. 

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

Button-id ist es Wert eg/Sie die A-Taste ist id="a".

Könnte jemand mir irgendwelche Ideen auf, wie dies zu tun?

  • werfen Sie einen Blick auf: stackoverflow.com/questions/13630229/onclick-in-css
  • setzen Sie Ihren code hier ein, oder verwenden Sie jsfiddle.net
  • Vielleicht ging ich etwas zu weit, aber ich mag onscreen-Tastaturen auch so gemacht, eine kleine demo: jsfiddle.net/3aQZG. Ich empfehle die Verwendung von jQuery in deinem Fall (artikulieren können, wenn die demo erfüllt Ihren Bedürfnissen). Die Tastatur ist ein bisschen lang, aber am Ende haben Sie den Eingang zu fangen keydon / Veranstaltungen (fiddle fängt diese Ereignisse auf den Körper, so musste über ein Ziel-Eingabefeld).
  • Hast du jemals eine Antwort auf dein problem? Wenn Sie haben, sollten mit uns geteilt haben.
InformationsquelleAutor | 2013-05-12
  1. 0

    Hier ist ein Beispiel, wird die Farbe zunächst in CSS und javascript verwendet addEventListener zu hören für einen Klick event und ändert die Farbe der Schaltfläche, wenn darauf geklickt, es beseitigt auch die angefügte Ereignis-listener.

    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);

    Auf jsfiddle

    In diesem Beispiel wird die Maus klicken Sie auf Ereignis, aber Sie brauchen, zu betrachten, wichtige Ereignisse statt einer Maus ein, es könnte einer von vielen; z.B. keydown, keypress, oder keyup.

    Update: Hier ist eine mögliche Lösung mit dem Schlüssel-events.

    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);

    Auf jsfiddle

    Hinweis: dieses Beispiel ist keineswegs perfekt, es ist nur ein Beispiel dafür, wie Ereignisse verwenden.

    Update: hier ist ein weiteres Beispiel mit allen 3 events zu de-bounce der Tastatur, wenn mehrere Tasten gedrückt und losgelassen werden. (Vergleichen Sie es mit den oben.)

    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);

    Auf jsfiddle

    Hinweis: auch diese ist nicht perfekt, da kommt es auf Millisekunden-timing zu entsprechen, keydown-und keypress-Ereignisse.

    InformationsquelleAutor Xotic750
  2. -1

    Oder alternativ können Sie jQuery:

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

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

    Natürlich, ersetzen Sie die Farben jeweils.

    Holen Sie sich jQuery

    Oder pure CSS:

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

    Es ist die beste, da Sie nicht haben, um code zu schreiben für jeden einzelnen Knopf, den Sie haben, und Sie haben wahrscheinlich bereits CSS-Klassen für Sie.

    • Ich Gabel sixFingers' Geige, die Reine CSS-Methode vor: jsfiddle.net/JFnKp
    • Ihr jquery-Beispiel sollte mit keydown und keyup: api.jquery.com/category/events/keyboard-events Es hat auch ein syntax-error, da der ":" nach der "hintergrund" sollte ",". Endlich mit dieser festen, dein Beispiel hat den gleichen Schlüssel bounce-Problem, da mein zweites Beispiel. Auch dein CSS-Beispiel funktioniert nur auf Klicks und nicht drückt.
    InformationsquelleAutor Sakknekedro
Schreibe einen Kommentar