是否可以使用 JS 或 jQuery 为 DIV 编写 onFocus/lostFocus 处理程序？答案

【问题标题】：Is it possible to write onFocus/lostFocus handler for a DIV using JS or jQuery?是否可以使用 JS 或 jQuery 为 DIV 编写 onFocus/lostFocus 处理程序？
【发布时间】：2012-07-01 07:51:39
【问题描述】：

我有一个 div，当用户单击 div 时，应该调用一个函数。当用户点击其他东西（除了这个 div 之外的任何东西）时，应该调用另一个函数。

所以基本上我需要有与此 DIV 关联的 onFocus() 和 lostFocus() 函数调用。它可以在 JavaScript 甚至 jQuery 中使用吗？

谢谢。

【问题讨论】：

如果要在 Click 事件上调用函数，为什么需要 onFocus？
@Mohammad，是的，我可以使用 Click 事件而不是 onFocus。但问题是，我需要有 lostFocus 事件或类似的事件。有什么想法吗？

标签： javascript jquery onfocus lost-focus

【解决方案1】：

您需要将tabindex 属性添加到div ：

$("#mydiv").focusin(function() {
  $("#mydiv").css("background", "red");
});
$("#mydiv").focusout(function() {
  $("#mydiv").css("background", "white");
});

#mydiv {
  width: 50px;
  height: 50px;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mydiv" tabindex="100"></div>
<div id="anotherdiv"></div>

【讨论】：

@Mohammad，Jashwant 非常感谢大家的回答。我看到了 jsfiddle 演示。正是我想要的。但遗憾的是，这种方法在我的代码中不起作用。它说 => $("#mydiv").focusin 不是函数。
@MohammadAdil，它奏效了。干杯! :) 我可以知道 TabIndex attr 在这方面的相关性是什么吗？只是好奇。
这个方法需要把JS代码放到document ready部分吧？
您可以将其放入 ready 本身或从 ready 调用的函数中--------并且 --tabindex 用于定义您在使用 Tab 时遵循的序列浏览页面的键
这是因为一个div默认没有tabindex，要在一个元素上使用focusin和focusout，它应该有一个tabindex，这就是为什么我们给我们的div设置一个tabindex ..

【解决方案2】：

焦点不适用于 DIV : http://api.jquery.com/focus/

也不错：jquery : focus to div is not working

If you want to focus a div or anything normally can't be focused, set the tag's tabindex to -1 first.
eg: $("div#header").attr("tabindex",-1).focus();

【讨论】：

你的方法奏效了，我得到了 focus() 的工作。现在我该如何实现 lostFocus()？ blur() 不起作用。
@Orbb 很高兴它有帮助：在这里你应该从这里获取失去焦点/焦点的代码：stackoverflow.com/questions/3088738/…:)
@Jashwant MAGIC :)) 怎么样？啊，我稍后会阅读您的问题，并可能在本周更详细地回复:P
@Jashwant 哈哈 :) 不贪图积分只是想给你的问题一个Quality :)) 不过这个问题做得很好！ :)

【解决方案3】：

不确定此解决方案是否适合您的网页，但您可以使用 JQuery on() 将点击事件附加到 body 元素并将其委托给子 div。然后在您的事件处理程序中，测试 id 属性并按此处理；类似：

$(body).on("click", "div", function (evt) {
     if ($(this).attr("id") == "innerDiv") {
            handle inner div click here
     } else {
            hanlde out div click here
     {
}

希望这会有所帮助...

【讨论】：

【解决方案4】：

当然。

$("#your-div-id").focusin(function() {
    // code here
});

$("#your-div-id").focusout(function() {
    // code here
});

【讨论】：

它没有用。我按照你的建议试过了。然后我用 bind/live 尝试了它，因为 div 是动态生成的。但是不行！ :(