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

Question

每当我执行 onchange 事件时，它都会进入 function 进行验证，但焦点不会出现我正在使用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; 
}

Answer 1

尝试使用计时器：

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

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

Answer 2

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

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

这种方式适用于 Firefox 和 Chrome，无需任何setTimeOut() 。

Answer 3

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

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

Answer 4

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

Answer 5

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

将 tabindex= 分配给元素时：

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

Answer 6

要添加到此列表以检查的另一件事：

确保您尝试聚焦的元素不是它本身，也不包含在您尝试聚焦它时具有“display：none”的元素中。

Answer 7

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

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

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

Answer 8

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

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

Answer 9

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

我设置焦点的代码是：

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

Answer 10

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

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

Answer 11

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

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

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

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

Answer 12

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

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

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; 
    }    
}

Answer 13

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

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

Answer 14

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

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

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

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

Answer 15

你的重点是在 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>

Answer 16

将此源放在您的模态上方：

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

Answer 17

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

Answer 18

试试location.href='#yourId'

像这样：

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

Answer 19

我试图使用.focus()移动滚动条 position 以便目标元素可见。

事实证明.focus()并非设计用于执行此操作 - 它用于“聚焦”表单元素，或者至少是可聚焦的东西（例如<a> ）。

正确的 function 调用是.scrollIntoView() 。

document.getElementById('mobileno').scrollIntoView();