在前端开发中，document.getElementById() 方法用于获取 HTML 页面上指定 ID 的元素。而 focus() 方法可以使得指定的元素获得焦点，从而响应键盘输入等事件。
然而，在某些情况下，尤其是在一些较旧的浏览器中，这两个方法的组合可能会导致问题。具体来说，当我们使用 document.getElementById(id).focus() 时，可能会发现它在 Firefox 或 Chrome 等浏览器中无法正常工作。
问题原因
该问题的原因在于浏览器的安全限制。针对恶意网站进行攻击的一种方式是将用户自动重定向到一个特定的页面，并强制让该页面获得焦点，以便欺骗用户进行某些操作。为了防止这种攻击方式，浏览器通常限制了页面自动获取焦点的能力。
默认情况下，Firefox 和 Chrome 都会阻止页面自动获取焦点。而 focus() 方法实际上就是在尝试强制让页面获得焦点，因此其行为可能会被浏览器视为恶意行为而被拦截。
解决方案
为了解决这个问题，有几种可行的解决方案：
- 手动获取焦点
可以使用 JavaScript 的 addEventListener() 方法，在一些用户交互事件（如点击）发生时，手动触发 focus() 方法。这种方式相对安全，也能保证跨浏览器的兼容性。
下面是一个示例代码：
// 获取元素
var myElement = document.getElementById('my-element');
// 添加事件监听器
myElement.addEventListener('click', function() {
// 手动获取焦点
myElement.focus();
});- 延迟获取焦点
在某些情况下，我们可以通过增加延迟时间来规避浏览器的安全限制。例如，可以使用 setTimeout() 方法将 focus() 方法推迟几毫秒执行。
下面是一个示例代码：
// 获取元素
var myElement = document.getElementById('my-element');
// 延迟获取焦点
setTimeout(function() {
myElement.focus();
}, 100);需要注意的是，这种方式可能会因为网络延迟等原因导致不确定的行为，因此应该谨慎使用。
- 在用户首次交互后获取焦点
另外一种解决方案是，等待用户首次交互页面后，再执行 focus() 方法。例如，在页面加载完成后添加一个事件监听器，在第一次用户交互事件（如点击）发生后，再触发 focus() 方法。
下面是一个示例代码：
-- -------------------- ---- ------- -- ---- --- --------- - -------------------------------------- -- ------- ---------------------------------- ---------- - -- ------- ------------------------------------- ------------------ -- ---- ------------------ ---
总结
document.getElementById(id).focus() 在 Firefox 或 Chrome 中无法正常工作的问题是由于浏览器的安全限制所导致的。为了解决这个问题，我们可以手动获取焦点、延迟获取焦点或在用户首次交互后获取焦点等方式。需要注意的是，在实际开发中应该根据具体情况选择合适的解决方案，并进行充分的测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26065