Firefox 63 - .focus() 未触发文本输入"focus"事件

Question

这里有一个代码笔来演示我所看到的内容：https://codepen.io/anon/pen/zMvxPy

HTML:

<input type="text" />

JS:

$('input').on('focus', () => {
console.log('focused...')
});
$('input').focus();

在Chrome上，文本输入将接收焦点，并触发"焦点"事件。在Firefox(63.0.1(上，文本输入没有焦点，焦点事件也没有触发。

但是，您可以点击文本输入，"焦点"事件就会正常启动。

关于.focus((方法为什么没有在Firefox中触发"焦点"事件，有什么解释吗。。。？

注意：我知道调用.focus((是通过点击按钮(如https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#Focus_on_a_text_field)但是这个例子是用于在初始页面加载期间调用.focus((。

Answer 1

对于其他遇到这种情况的人来说，事实证明我打开了Firefox开发工具，Firefox将重点放在页面加载上，而不是在初始渲染期间调用.focus()的任何项目。

几个观察：

1. 这种行为也出现在CodePen或StackBlitz等web编辑器中。Firefox优先关注编辑器窗格，而不考虑代码本身中的任何初始.focus()调用
2. 在Angular应用程序的情况下，即使在ngAfterViewInit()中调用.focus()也会被Firefox对开发控制台的初始关注所覆盖。
   • 例如，尝试打开https://angular-77iyz4.stackblitz.io在Firefox中打开或不打开开发工具。只有当开发工具关闭时，文本输入才会集中。在Chrome中，这无关紧要