Question

使用jquery将焦点设置到元素时似乎存在问题。它显然不会触发：在元素上设置focus css属性。

例如在我的CSS中我有：

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

在我的jquery中我有：

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

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

Answer 1

div元素不使用:focus选择器..请参阅the CSS2 spec

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

你可以这样做：

.hoverclass { border:2px solid red; }

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

这使用.hover()，.addClass()和.removeClass()

Answer 2

focus()仅适用于表单元素和链接，如果您尝试在其他类型的元素上使用它，则无法使用。

有关详细信息，请参阅jQuery doc for focus()

Answer 3

来自the manual：

焦点事件在获得焦点时发送到元素。这个事件隐含地适用于有限的一组元素，例如形式元素（<input>，<select>等）和链接（<a href>）。在最近在浏览器版本中，事件可以扩展为包含所有元素通过显式设置元素的tabindex属性来显示类型。一个 element可以通过键盘命令获得焦点，例如Tab键，或通过鼠标点击元素。

请参阅此答案以获取示例：https://stackoverflow.com/a/5966034/1013082

Answer 4

转到jQuery focus（）页面查看：

焦点事件在获得焦点时发送到元素。这个事件隐含地适用于有限的一组元素，例如形式元素（<input>，<select>等）和链接（<a href>）。在最近在浏览器版本中，事件可以扩展为包含所有元素通过显式设置元素的tabindex属性来显示类型。一个 element可以通过键盘命令获得焦点，例如Tab键，或通过鼠标点击元素。

转到PPK关于浏览器的研究

PPK focus Event Browser compatibility

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

Answer 5

如果div具有tabindex属性，则可以对其进行聚焦。在这里看到这个答案：

https://stackoverflow.com/a/11928222/706284

Answer 6

你需要这样做：

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

jquery焦点不会触发css焦点

6 个答案: