document.getElementById(id).focus() 不适用于 firefox 或 chrome

IT技术 javascript
2021-03-03 22:41:50

每当我执行 onchange 事件时,它都会进入该函数内部进行验证,但是我正在使用的焦点没有出现 document.getElementById('controlid').focus();

我正在使用 Mozilla Firefox 和 Google Chrome,两者都不起作用。我不想要任何 IE。谁能告诉我是什么原因。

提前致谢

这是代码:

var mnumber = document.getElementById('mobileno').value; 
if(mnumber.length >=10) {
    alert("Mobile Number Should be in 10 digits only"); 
    document.getElementById('mobileno').value = ""; 
    document.getElementById('mobileno').focus(); 
    return false; 
}
6个回答

尝试使用计时器:

const id = "mobileno";
const element = document.getElementById(id);
if (element.value.length >= 10) {
    alert("Mobile Number Should be in 10 digits only");
    element.value = "";
    window.setTimeout(() => element.focus(), 0);
    return false;
}

当线程空闲时,计数为 0 的计时器将运行。如果这没有帮助,请尝试使用onblur事件中的代码(使用计时器)

我不喜欢不理解,因为我忘记了一切,但是当我理解某事时,我只是理解它,我不需要记住它。所以我有一个问题要问@AndyE,你是从哪里了解到的?我很想阅读有关 javascript 规范的信息,我知道不一定会遵循实现,但是当您说“将在线程空闲时运行”时,我立即明白了为什么它不起作用。所以我想了解内部结构。
2021-04-20 22:41:50
想把它挖掘出来,但是正如上面的一些担忧,为什么这行得通?
2021-05-08 22:41:50
2021-05-09 22:41:50
@AndyE Soooper 很想知道它究竟是如何工作的,请参考???
2021-05-10 22:41:50
这也是 JS 事件循环blog.sessionstack.com/...
2021-05-16 22:41:50

如果focus()不工作,请注意两件事

  • 附加到父级后使用此函数
  • 如果选择console,刷新页面后,元素不会获得焦点,所以测试时选择(点击)网页

这种方式适用于 Firefox 和 Chrome,没有任何setTimeOut().

我总是忘记控制台 -.- 谢谢你记得我 =)
2021-04-21 22:41:50
我还console打开了 Firefox 开发工具(即),关闭它为我解决了这个问题
2021-04-24 22:41:50
感谢您对控制台的澄清。因为我想知道为什么我的简单 a[0].focus() 不起作用
2021-04-27 22:41:50
该死!您保存了我的调试时间,实际上,选择控制台时,焦点方法不起作用。如果我认识你,我会请你喝啤酒!
2021-05-02 22:41:50
在 Chrome 中关闭控制台确实解决了这个奇怪的问题。
2021-05-15 22:41:50
window.setTimeout(function () { 
    document.getElementById('mobileno').focus(); 
}, 0); 

这也对我有用。Firefox 会设置我的元素的值,但不会为其提供焦点。

我的情况有点不同。我试图focus()从浏览器开发人员控制台中输入。原来它以某种方式干扰了输入,一旦我最小化控制台,一切都按预期工作我知道这不是一个程序化的解决方案,但如果有人像我一样在搜索引擎 jist 上发现了这个,那么这些信息可能会有所帮助。

我疯狂了 2 个小时,尝试了所有方法,但使用了开放的 chrome 开发工具
2021-05-09 22:41:50
你节省了我的时间:)
2021-05-09 22:41:50
这其实就是答案!Chrome Dev Tools 阻止了焦点操作。
2021-05-16 22:41:50

并非所有元素都是可聚焦的,但默认情况下,有一个 tabindex 属性来解决这个问题。

当您将 tabindex= 分配给元素时:

它变得可聚焦。用户可以使用 tab 键从具有较小正 tabindex 的元素移动到下一个元素。例外是一个特殊值 tabindex="0" 意味着该元素将始终在最后。tabindex=-1 意味着一个元素变得可聚焦,但 tab 键将始终跳过它。只有 focus() 方法有效

很好的解释。修复了我所有的 tabIndex 问题
2021-04-29 22:41:50
这修复了它。使用 window.setTimeout 或关闭控制台可能会暂时解决问题,但仍应使用 tabindex 以确保安全。
2021-04-29 22:41:50