文本框调用focus()方法未生效及新增按钮后恢复正常的原因咨询

问题1：为什么场景1中焦点没有被正确设置到第一个文本框上？ #

核心是两个因素共同作用导致失效：

• 浏览器默认焦点转移逻辑优先级更高：场景1里driveD是页面最后一个可聚焦DOM元素，将焦点从driveD移出时，浏览器默认会把焦点转移到页面外的浏览器UI区域（比如地址栏、标签栏、菜单栏等不属于当前文档DOM的部分）。blur事件在焦点即将离开元素时触发，此时在回调内给DOM元素设置的焦点，会被后续触发的浏览器默认焦点转移行为覆盖，最终焦点落到页面外的浏览器控件上，因此看不到文本框被聚焦的效果。
• alert弹窗的额外干扰：代码中在focus调用前先触发了alert，alert本身会抢夺当前焦点，等用户关闭alert时，浏览器的默认焦点转移流程已经执行完毕，此时的focus调用也无法覆盖已经完成的页面外焦点转移逻辑。

问题2：仅在末尾新增按钮就可让功能正常运行的核心原因是什么？ #

新增button后，driveD不再是页面最后一个可聚焦DOM元素。此时从driveD移出焦点时，浏览器的默认焦点转移目标是新增的button，属于当前文档DOM范围内的元素。在blur回调内手动调用focus方法设置第一个文本框为焦点，会优先于浏览器默认的到button的焦点转移行为执行，且本次焦点转移全程都在文档DOM范围内，不会被页面外的浏览器UI焦点逻辑覆盖，因此可以正常生效。

内容的提问来源于stack exchange，提问作者Jayababu