Question

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr" lang="en">
<head>
    <script src="../js/third_party/jq142unmin.js"></script>
    <script>
        $(document).ready( function(){
            $("#set_focus1").click(function(){
                console.log($("#input1").focus());
            });
            $("#set_focus2").click(function(){
                console.log($("#input2").focus());
            });
        });
    </script>
</head>
<body>
    <input id="input1"></input>
    <input id="input2"></input>
    <button id="set_focus1">Set Focus1</button>
    <button id="set_focus2">Set Focus2</button>
</body>
</html>

enter image description here

代码本身就像我认为的那样工作，例如，单击按钮设置焦点在一个输入或另一个输入上。但是，如果我从控制台尝试相同的事情，它没有任何效果（没有错误消息，只是没有做任何事情）。我尝试了几种不同的方法，如上所示。

在这些输入元素上从控制台执行的其他jQuery函数，例如。 $（“＃input1”）。val（“foo”），就像我期望的那样。 focus（）有什么不同？

Answer 1

我刚刚复制了这个，这不是错误，它只是浏览器处理输入的方式。当您使用开发人员工具时，该页面没有您的标线，因此不会将其传递给其他元素。

该元素实际上确实变得“集中”。在您的浏览器中运行此操作，您将看到focus()事件触发，但是您关注另一个窗口，浏览器不会强制将您更改为该页面。

$("#input1").on("focus", function(){  alert("focused")  });
$("#input1").focus();

这将触发警报。

Answer 2

控制台与浏览器窗口分开。因此，当您在控制台中执行某些命令时，焦点将不会移动到html窗口。这就是为什么你没有得到预期的结果。

$("#input1").val("foo")正在设置DOM元素的值。因此它将更改值并将光标保持在控制台中。

要验证$("#input1").focus()，您可以在焦点事件中发出警报，然后从控制台调用该事件。

为什么focus（）不能像它应该的那样工作？

2 个答案: