HTML/CSS/JS - Ändern des Stils von verschiedenen s nur während ctrl/shift/alt-Taste gedrückt gehalten wird

Ich versuche derzeit, eine Webseite zu erstellen, um Event-Handler zu lernen, obwohl ich Probleme habe, herauszufinden aus was ich tun muss, um diese Arbeit zu machen ...HTML/CSS/JS - Ändern des Stils von verschiedenen s nur während ctrl/shift/alt-Taste gedrückt gehalten wird

Im Moment habe ich eine Tabelle mit 4 Zellen in einer Reihe. Ich habe sie so gestylt.

#testCtrl, #testShift, #testAlt, #testMeta { 
    background-color: black; 
    color: white 
    ... 
}

Was ich versuche, ist die Hintergrundfarbe der Zelle zu ändern, wenn die entsprechende Taste gedrückt gehalten wird. Problem ist - ich bin nicht vertraut mit der Syntax und was ich kann und nicht tun kann ... Alles, was ich an diesem Punkt weiß, ist, dass ich die spezifische td, über ID, einer Variablen zuweisen und dann diese Variable ändern muss.

var _ctrlPress = document.getElementById("testCtrl");

Ich bin nur nicht sicher, wie gegen testen, ob die Strg-Taste wird derzeit allerdings gedrückt oder nicht, und ich bin nicht viel Informationen online über es zu finden, wahrscheinlich aufgrund der schlechten Kenntnis dessen, was suchen nach.

Auch würde ich nicht die jquery Route zu dieser Zeit gehen.

Ich entschuldige mich für die Ignoranz, und vielen Dank für Ihre Zeit.

Bearbeiten: Nach ein paar Tipps aus den Kommentaren, hier ist, was ich mir ausgedacht habe. Immer noch Fehler beim Anwenden auf eine größere Datei, obwohl das gleiche Konzept in einem kleinen Test-HTML-Dokument funktioniert, an dem ich herumgebastelt habe ... Ich bin verloren, ha.

Script Abschnitt:

window.addEventListener("keydown", function(ev) { 
    var modP = ev.key; 
    if (modP=== "Shift") document.getElementById("testShift").classList.add("highlight"); 
});

Style-Sektion:

#testCtrl, #testShift, #testAlt, #testMeta { 
    background: black; 
    color: white 
} 

.highlight { 
    background: white !important; 
    color: black !important; 
}

Und schließlich der HTML-Abschnitt (oder zumindest die entsprechenden Bits):

<tr> 
    <td id="fillShift"> Shift 
    <td id="fillCtrl"> Ctrl 
    <td id="fillAlt"> Alt 
    <td id="fillMeta"> Meta 
</tr>

Wo bin ich durcheinander oben?

Wieder entschuldige ich mich für meine Ignoranz. Vielen Dank für Ihre Zeit.

Quelle

2017-03-29 NFDL

Überprüfung der Antwort unten. –

Hinzufügen 2 eventListener zu Fenster. 1 für Keydown und 1 für Keyup. Ändern Sie die Farbe auf Keydown. auf keyup, die Farbe

ändern zurück

window.addEventListener("keydown",function(e){ 
 
    if(/^1[6-8]$/.test(e.keyCode)){ 
 
     document.body.style.backgroundColor="#f00"; 
 
    } 
 
}); 
 
window.addEventListener("keyup",function(){ 
 
    document.body.style.backgroundColor="#aaa"; 
 
});

<body style="background-color:#aaa;"></body>

Quelle

2017-03-29 12:45:07

Wenn ich darf, was genau macht dieser reguläre Ausdruck in der if-Anweisung? Ich habe Ihre Syntax ein wenig modifiziert, so dass sie für mich eine Lösung ergab, die auf meiner Maschine mit einem Test-HTML funktionierte, aber wenn ich versuche, sie in die Webseite zu integrieren, die ich eigentlich machen möchte, dann ist es das funktioniert gar nicht. Ich werde den Code im Hauptpost posten, da ich ihn hier anscheinend nicht in den Kommentaren formatieren kann, ha. Vielen Dank für die Antwort! – NFDL

Nun, zuerst zu beantworten, was die Regex wird übereinstimmen. 16, 17 und 18. Die Tastencodes von shift, ctrl und alt. Wenn du den geänderten Code eingibst, kann ich hrlp finden und korrigieren den Fehler @NFDL –

@NFDL hat es für dich funktioniert? –

HTML/CSS/JS - Ändern des Stils von verschiedenen s nur während ctrl/shift/alt-Taste gedrückt gehalten wird

Antwort

Verwandte Themen