时间戳

首页 > 解决方案 > Firefox 63 - .focus() 没有触发文本输入的“焦点”事件

javascript - Firefox 63 - .focus() 没有触发文本输入的“焦点”事件

问题描述

这是一个代码笔来演示我所看到的： 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() 。

标签： javascriptfirefox

解决方案

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

几个观察：

  1. 在 CodePen 或 StackBlitz 等 Web 编辑器中也可以看到这种行为。.focus()Firefox 以牺牲代码本身的任何初始调用为代价，优先关注编辑器窗格。
  2. 在 Angular 应用程序的情况下，即使是调用也会.focus()被ngAfterViewInit()Firefox 最初对开发控制台的关注所覆盖。
    • 例如，无论是否打开开发工具，尝试在 Firefox 中打开https://angular-77iyz4.stackblitz.io 。仅当开发工具关闭时，文本输入才会被聚焦。在 Chrome 中，这无关紧要。

推荐阅读