use onkeydown or onkeyup to trigger a function without setting up an input Javascript

Question

Right now I have this:

<form>
    <input onkeydown='changeColor()'>
</form>

But can I use the onkeydown='changeColor()' outside of an input? So the user doesn't see anything but when they press a key down the changeColor function is triggered?

Possible duplicate of [Simplest way to detect keypresses in javascript](https://stackoverflow.com/questions/16089421/simplest-way-to-detect-keypresses-in-javascript) — Oliver, Aug 24 '18 at 12:33

score 0 · Answer 1 · answered Aug 24 '18 at 12:31

0

You can use the 'keydown' and 'keyup' events with the document or window object for that purpose.

answered Aug 24 '18 at 12:31

score 0 · Answer 2 · answered Aug 24 '18 at 12:32

There are global event handlers. And there is one for key press, which can be attached to window object:

window.onkeypress = function(ev) {
    myObject.dataLog += String.fromCharCode(ev.charCode);
}

Fur further informations take a look at the documentation.

score 0 · Accepted Answer · answered Aug 24 '18 at 12:32

0

You can set an element focusable with the tabindex attribute.

Then when it is focusable you can set on it the keydown binding.

And when the focus is on it and you press a key it will fire the event handler.

function sayHello(){
 console.log("HELLO!");
}

<div id="focusable" tabindex=0 onkeydown='sayHello()'>
A DIV
</div>

answered Aug 24 '18 at 12:32

jmtalarn

1,513
1
13
16

Exactly what I was looking for! Thank you so much – Jonathan Fascetti Aug 24 '18 at 12:46

ThS · Answer 4 · 2018-08-24T13:53:04.103

You can attach keyboard events, almost(as of HTML5 any element can get tabindex attribute), to any HTML element. Using the tabindex attribute, you can make an element focusable, thus, it will accept keyboard events.

var els = document.querySelectorAll('.focusable'), l = els.length, c = 0;
for(; c < l; c++) {
  els[c].addEventListener('keydown', function(e) {
    this.style.backgroundColor = (this.style.backgroundColor == 'green') ? 'white':'green';
    console.log('Keydown event on element with ID = ' + e.target.id);
  });
}

/* just for this demo */
.focusable {
  width: 300px;
  height: 300px;
  border: 2px solid red;
  line-height: 300px;
  text-align: center;
  margin: 5px auto;
}

<div id="div1" class="focusable" tabindex="0">Press a key</div>
<div id="div2" class="focusable" tabindex="0">Press a key</div>
<div id="div3" class="focusable" tabindex="0">Press a key</div>
<div id="div4" class="focusable" tabindex="0">Press a key</div>

A word about tabindex attribute

tabindex attribute allows an element to be accessible through TAB key, some elements have this behaviour even without specifying the tabindex attribute such as input elements...

tabindex attribute accept only numeric values. An example to illustrate:

tabindex="X": here "X" means a positive number. As the value of "X" gets bigger the element loses priority in terms of accessibility by the TAB, so, tabindex="1" is thea first, it has bigger priority comparing to other elements.

tabindex="0": the recommended value, with that you preserve the order of the elements in the page when pressing TAB key.

tabindex="-1": with that, you make the element non-accessible through the TAB key, but you make it programmatically focusable(useful when you want to make a modal popup that can be closed with the ESC key).

use onkeydown or onkeyup to trigger a function without setting up an input Javascript

4 Answers4