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

【问题标题】：document.getElementById(id).focus() is not working for firefox or chromedocument.getElementById(id).focus() 不适用于 firefox 或 chrome
【发布时间】：2010-11-08 22:43:51
【问题描述】：

当我做 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; 
}

【问题讨论】：

请发布一些代码，以便我们了解发生了什么。另外，请尝试稍微清理一下您的问题。
您是在 onload 处理程序中执行此操作吗？
好吧..我正在做手机号码。验证，在那个 onchange 事件中我这样写 var mnumber= document.getElementById('mobileno').value; if(mnumber.length >=10){ alert("手机号只能是 10 位数字"); document.getElementById('mobileno').value=""; document.getElementById('mobileno').focus();返回假； } 在这里，如果有人输入小于 10 的数字，它将显示警报并在焦点转到下一个字段之后清除文本字段，我试图在同一字段中给出它不适合 Mozilla 和 crome。
您是否在您的 html 中添加了“索引”属性？

标签： javascript

【解决方案1】：

尝试使用计时器：

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 规范的信息，我知道实现不一定会遵循，但是当您说“将在线程空闲时运行”时，我立即明白为什么它不起作用。所以我想了解内部结构。
想要挖掘这个，但是正如上面的一些问题，为什么这会起作用？
可以在这里找到解释stackoverflow.com/questions/33955650/…和stackoverflow.com/questions/779379/…
这也是JS事件循环的一个非常好的可视化表示blog.sessionstack.com/…
@AndyE Soooper 很想知道它是如何工作的，请参考？？？

【解决方案2】：

您是否尝试在 DOM 完成加载之前引用该元素？

您的代码应该进入正文加载（或在 DOM 加载时应该执行的另一个函数，例如 jQuery 中的 $(document).ready()）

body.onload = function() { 
    // your onchange event handler should be in here too   
    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; 
    }    
}

【讨论】：

【解决方案3】：

确保使用“id”和“getElementById”，如下所示：

<FORM id="my_form" name="my_form" action="">
<INPUT TYPE="text" NAME="somefield" ID="somefield" onChange="document.getElementById('my_form').submit();">
</FORM>

【讨论】：

【解决方案4】：

上面建议的超时解决了 Chrome 上的问题。在 IE8 或 FF3 上不存在问题。

我设置焦点的代码是：

window.setTimeout(function() {
  document.form1.password.focus();
}, 0);

【讨论】：

【解决方案5】：

添加一个控件，您要在其中设置焦点，然后更改其属性，如下所示

<asp:TextBox ID="txtDummy" runat="server" Text="" Width="2" ReadOnly="true" BorderStyle="None" BackColor="Transparent"></asp:TextBox>

在代码隐藏中，只需像下面这样调用 txtDummy.Focus()

此方法适用于所有浏览器。

【讨论】：

【解决方案6】：

为了重新获得焦点以在 javascript 中重新输入密码文本框：

window.setTimeout(function() { document.forms["reg"]["retypepwd"].focus(); },0);

这里，reg 是注册表单名称。

【讨论】：

【解决方案7】：

window.setTimeout(function () { 
    document.getElementById('mobileno').focus(); 
}, 0);

这也对我有用。 Firefox 会设置我的元素的值，但不会将焦点放在它上面。

【讨论】：

【解决方案8】：

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

当您将 tabindex= 分配给一个元素时：

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

【讨论】：

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

【解决方案9】：

如果focus() 不起作用，需要提及的两件事：

添加到父节点后使用此函数
如果选择控制台，刷新页面后，元素不会获得焦点，所以在测试时选择（点击）网页

这种方式在没有任何setTimeOut() 的情况下适用于 Firefox 和 Chrome。

【讨论】：

在 Chrome 中关闭控制台确实解决了这个奇怪的问题。
该死！您保存了我的调试时间，实际上，选择控制台时，焦点方法不起作用。如果我认识你，我会请你喝啤酒！
我总是忘记控制台 -.- 谢谢你记得我 =)
我还打开了 Firefox 开发工具（即console），然后关闭它为我解决了问题
感谢您对控制台的说明。因为我想知道为什么我的简单 a[0].focus() 不起作用

【解决方案10】：

return false 之前你的注意力在工作；，之后就不行了。你试试这个解决方案。返回false后控制；

将代码放入函数中：

function  validateNumber(){
    var mnumber = document.getElementById('mobileno').value; 
    if(mnumber.length >=10) {
        alert("Mobile Number Should be in 10 digits only"); 
        document.getElementById('mobileno').value = ""; 
        return false; 
    }else{
        return true;
    }
}

调用函数：

function submitButton(){
        if(!validateNumber()){
            document.getElementById('mobileno').focus();
            return false;
        }
}

HTML：

Input:<input type="text" id="mobileno">
<button onclick="submitButton();" >Submit</button>

【讨论】：

【解决方案11】：

我知道这可能是一个深奥的用例，但在使用 Angular 2 框架时，我很难获得输入以集中注意力。无论我做什么，调用 focus() 都不起作用。

最终我意识到 angular 正在抑制它，因为我没有在输入上设置 [(ngModel)]。设置一个解决了它。希望它可以帮助某人。

【讨论】：

【解决方案12】：

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

【讨论】：

这就是答案！ Chrome 开发工具正在阻止焦点操作。
我疯了 2 个小时，尝试了一切，但使用了开放式 chrome 开发工具
你节省了我的时间:)

【解决方案13】：

我怀疑这可行的原因是浏览器渲染运行在与 javascript 相同的线程上，并且 setTimeout(function(){},0);将 setTimeout 中的 javascript 函数排入队列，以便在浏览器空闲时执行。如果有人有更深入的解释，请分享。

setTimeout(function(){ 
 if(document.getElementById('mobileno')){
  document.getElementById('mobileno').focus();
 } 
},0);

【讨论】：

【解决方案14】：

还有一件事要添加到此列表中以进行检查：

确保您尝试聚焦的元素不是自身，也不是在您尝试聚焦时包含在“display: none”的元素中。

【讨论】：

【解决方案15】：

将此来源置于您的模式上方：

<script>
$('body').on('shown.bs.modal', '#IdYourModal', function () {
    document.getElementById('mobileno').focus();
})
</script>

【讨论】：

【解决方案16】：

我刚刚发现要检查的一件事是，如果有多个元素具有相同的 ID，它将无法工作。如果您尝试这样做，它不会出错，它只是默默地失败

【讨论】：

【解决方案17】：

试试location.href='#yourId'

像这样：

<button onclick="javascript:location.href='#yourId'">Show</button>

【讨论】：

【解决方案18】：

我在vue js也遇到过这类问题。

我使用 vue $nextTick 方法解决了这个问题

this.$nextTick(() => {                      
    this.$refs['ref-name'].focus(); 
});

您可以在 vue js 挂载的生命周期挂钩中使用它。

【讨论】：

问题没有用 vue js 标记。因此，人们不太可能找到这个答案（有用）
这并不能真正回答问题。如果您有其他问题，可以点击提问。要在此问题有新答案时收到通知，您可以follow this question。一旦你有足够的reputation，你也可以add a bounty 来引起更多的关注这个问题。
嗯，我确实觉得它很有用。大多数框架都有tick 情况，并且由于该元素没有聚焦。