Menu
I'd like to get keydown events on a div. I use JQuery keydown. Pretty simple.
However, it does not work on chrome. For this to work on chrome, I have to set tabindex = 0.
If I do this, Chrome puts an ugly orange border around my div.
Is there a way to make this work on chrome without the ugly orange border?
490
We set the onKeyDown prop on the input element, so every time the user presses a button when the input has focus, the handleKeyDown function is invoked. The key property on the event object returns the value of the key pressed by the user.
The keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup , but as 97 by keypress . An uppercase "A" is reported as 65 by all events.
In this article Occur in sequence when a user presses and releases a key. KeyDown occurs when the user presses a key. KeyUp occurs when the user releases a key.
Return values: It returns whether any key is pressed or not or which key is pressed.
Keydown event is only sent to the HTML element that has the focus. Focusable elements vary between browsers, but elements of which tabindex property is set can always get focus in most browsers.
You have already set tabindex for div element so that it is focusable and can receive keyboard event. Your problem is the default outline of currently focused element on Google Chrome.
To change the outline (the "ugly orange border" as you mentioned), use pseudo CSS class :focus and CSS property outline. The following example will remove outline from all elements when they have focus:
*:focus
{
outline: none;
}
Hope this help.
89
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
