如何在Chrome的div上获取按键事件? [英] How can I get keydown events on a div in chrome?

问题描述

我想在div上获取按键事件.我使用JQuery keydown.很简单.

I'd like to get keydown events on a div. I use JQuery keydown. Pretty simple.

但是，它不适用于Chrome.为了在chrome上运行，我必须将tabindex设置为0.

However, it does not work on chrome. For this to work on chrome, I have to set tabindex = 0.

如果我这样做，Chrome浏览器的div周围会出现一个难看的橙色边框.

If I do this, Chrome puts an ugly orange border around my div.

有没有办法在没有难看的橙色边框的情况下在chrome上进行这项工作?

Is there a way to make this work on chrome without the ugly orange border?

推荐答案

Keydown事件仅发送到具有焦点的HTML元素.可聚焦元素在浏览器之间有所不同，但是设置了tabindex属性的元素始终可以在大多数浏览器中获得焦点.

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.

您已经为div元素设置了tabindex，以便它可以聚焦并可以接收键盘事件.您的问题是Google Chrome当前关注的元素的默认轮廓.

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.

要更改轮廓(如您所说的丑陋的橙色边框")，请使用伪CSS类:focus和CSS属性outline.以下示例将在所有具有焦点的元素上删除轮廓:

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;
}

希望获得帮助.

这篇关于如何在Chrome的div上获取按键事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！