CODEWITHSUNDEEP
javascriptjqueryhtmlcss
naveed Softdukan
naveed Softdukan

Reputation: 89

How active button using java script or jquery?

I have virtual keyboard.
I want active button when any key pressed.
I used CSS active class. It works. But it only work when I press button by mouse.
If I press button from key board it not work.
Here is my CSS

#keyboard li:active {
    position: relative;
    top: 1px;
    left: 1px;
    background-color: #e74c3c;
    border-color: #e5e5e5;
    cursor: pointer;
    color:white;
}

This is the link
http://projects.imube.com/keyboard/

Upvotes: 0

Views: 86

Answers (1)

hdotluna
hdotluna

Reputation: 5732

var hey = document.getElementById('hey');

let makeActive = () => {
  hey.classList.contains('active') ? hey.classList.remove('active') : hey.classList.add('active');
}

hey.onclick = makeActive;

window.onkeypress = (e) => {
  let key = e.keyCode || e.which;

  if(e.keyCode == 13) {
    makeActive();  
  }
}
a.active {
  color: red;
}
<a id="hey">Press Enter or Click this!</a>

You need two different event handlers. One is keypress and click.

Here's you can get keyCode: https://css-tricks.com/snippets/javascript/javascript-keycodes/

Hope it helps.

Upvotes: 1

Related Questions