如何将光标放在输入选项卡中

Question

在Google中，我将代码document.querySelector('[aria-label="Search"]').select();放在控制台日志的输入标签中，以查看是否选中了Google的输入标签。我确认我正确调用了输入选项卡，但控制台日志仅显示了undefined如何使用javascript将光标置于输入选项卡中。如果不是javascript，请仍然分享如何将光标置于输入标签中

Answer 1

您输入的代码正确。您的问题实际上有两个部分：

为什么控制台在运行undefined后显示.select()？

要理解undefined，了解控制台的工作原理很重要。在控制台中输入表达式时，它将使用eval运行该表达式并显示结果。例如：

• 1 + 3的值为4
即使定义了变量，
• var a = 1 + 3的计算结果仍为undefined
即使显示了警报，
• alert("hello")的计算结果仍为undefined

在您的示例中，HTMLInputElement.select()不返回任何内容，因此控制台仅显示undefined。话虽如此，代码实际上确实可以运行。您可以通过使用控制台显示alert来进行验证。

（如果您对控制台如何决定表达式结果显示的细节感兴趣，我来看看this answer。）

为什么在使用控制台运行.select()时搜索字段没有聚焦？

对于您的问题的这一部分，建议您尝试自己控制的页面的来源。请注意，如果您设置了一个按钮以在文本字段上调用.select()，则该字段将成为焦点。如果您使用控制台运行相同的代码，则该字段将不突出显示。

虽然我不确定具体细节，但这似乎是因为开发人员工具拒绝失去焦点，而无需用户专门单击其他元素或将其关闭。如果您改为将表达式包装在超时中并在超时执行之前更改焦点，则代码将按预期工作。

您可以通过以下操作在网页和Google上进行验证：

1. 使用控制台运行：

   setTimeout(() => document.querySelector('[aria-label="Search"]').select(), 2000)
   

2. 快速单击页面背景以放弃开发人员工具的焦点。

3. 观察到超时执行时该字段聚焦。