Change color of li class with javascript when keyboard key is pressed

Question

I've created a keyboard with HTML and CSS, and I'm trying to make the keys "glow" with a different background-color when the same key is pressed on the keyboard (the real-life keyboard that is).

It looks something like this:

<div id="keyboard">
<ul class="row">
<li class="letter">Q</li>
<li class="letter">W</li>
.
.
.
</ul>
</div>

And i have the following javascript code:

$('#keyboard .letter').keydown(function() {
$(this).addClass('red');
}).keyup(function() {
$(this).removeClass('red');
});

I'm just trying to make the keys "glow" when pressing them on my keyboard, without an input field.. Is it possible? — Håvard Brynjulfsen
– Håvard Brynjulfsen, Commented Jan 31, 2014 at 14:03
Do you mean that if the user presses a certain character, that character should glow? — display-name-is-missing
– display-name-is-missing, Commented Jan 31, 2014 at 14:04

Community · Accepted Answer · 2020-06-20 09:12:55Z

8

This worked for me:

HTML

<div id="keyboard">
    <ul class="row">
        <li class="letter" id="q">Q</li>
        <li class="letter" id="w">W</li>. . .</ul>
</div>

jQuery

$(document).keypress(function(e){
    
    var which_letter = String.fromCharCode(e.which);
    $('#'+which_letter+'').addClass('red');

});

$(document).keyup(function(){
    $(".letter").removeClass('red');
});

CSS

 .red { color:#f00; }

DEMO

Note

If you would like the letter to glow no matter if he/she presses 'X' or 'x', change:

var which_letter = String.fromCharCode(e.which);

to:

var which_letter = String.fromCharCode(e.which).toLowerCase();

Otherwise the user must press exactly the value of the letter's id.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 31, 2014 at 14:07

display-name-is-missing

4,4055 gold badges31 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anastasios Vlasopoulos · Accepted Answer · 2014-01-31 14:14:41Z

0

As i can see you are using jQuery. So it is easy to trigger key events like this one for example:

var e = jQuery.Event("keydown");
e.which = 50; // Your code value here
$("input").trigger(e);

Additionally, if you want to use clicks on your keyboard then you must use input type of field.

answered Jan 31, 2014 at 14:14

Anastasios Vlasopoulos

1,80223 silver badges34 bronze badges

Collectives™ on Stack Overflow

Change color of li class with javascript when keyboard key is pressed

2 Answers 2

Note

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Note

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related