jQuery的focus事件不会触发CSS的focus状态。

Question

使用jQuery设置元素的焦点时似乎存在问题。它显然不会触发元素上设置的:focus CSS属性。

例如，在我的CSS中，我有：

div.item1:focus { border:2px solid red; }

在我的 jQuery 中，我有：

$("div.item1").focus();

焦点已设置，但元素上没有应用红色边框。

- aris

Answer 1

元素不使用 :focus 选择器.. 参见CSS2 规范

:focus 伪类应用于元素具有焦点（接受键盘事件或其他形式的文本输入）时。

你可以这样做：

.hoverclass { border:2px solid red; }

$("div.item").hover(function() {
  $(this).addClass('hoverclass')
},function() {
  $(this).removeClass('hoverclass')
});

这段代码使用了 .hover()、.addClass() 和 .removeClass() 方法。

- Manse

Answer 2

focus() 只能用于表单元素和链接，如果您尝试在其他类型的元素上使用它，则无法正常工作。

有关更多信息，请参见jQuery文档中的focus()部分。

- Øyvind Bråthen

---

在最近的浏览器版本中，可以通过显式设置元素的tabindex属性来将事件扩展到包括所有元素类型。-- 来自上面的jQuery文档链接 - sabithpocker

似乎有点不可靠，因为没有定义什么是“最近的浏览器”，但当然也可以这样做。其他解决方法可能更可取。 - Øyvind Bråthen

我刚发现ppk在这方面的工作，他已经为搜索包括了“具有tabindex属性的元素”。 - sabithpocker

Answer 3

来自手册：

当元素获得焦点时，会向该元素发送焦点事件。该事件隐式适用于一组有限的元素，例如表单元素（<input>，<select>等）和链接（<a href>）。在最新的浏览器版本中，可以通过显式设置元素的tabindex属性来扩展事件以包括所有元素类型。元素可以通过键盘命令（如Tab键）或鼠标单击元素来获得焦点。

请参考此答案进行示例：https://dev59.com/xm025IYBdhLWcg3wf2OE#5966034

- MetalFrog

Answer 4

前往jQuery的focus()页面查看：

当元素获得焦点时，将向该元素发送焦点事件。此事件隐式适用于一组有限的元素，例如表单元素（<input>、<select>等）和链接（<a href>）。在最近的浏览器版本中，可以通过显式设置元素的tabindex属性来扩展事件以包括所有元素类型。元素可以通过键盘命令（如Tab键）或单击元素来获得焦点。

前往PPK关于浏览器焦点的研究页面：

PPK焦点事件浏览器兼容性

看起来所有浏览器都通过了tabindex测试。

- sabithpocker

Answer 5

你需要做这个：

$("div.item1").focus(function(){
        $("div.item1").css("border","2px solid red");
      });

- Ashwin Singh

---

换成轮廓线怎么样？ - sabithpocker