使用onkeydown或onkeyup触发功能而无需设置输入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?

Answer 1

为此，您可以将'keydown'和'keyup'事件与文档或窗口对象一起使用。

Answer 2

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 .

Answer 3

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> 

Answer 4

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