HTML5自动对焦仅在选项卡处于非活动状态时有效

编程问答 2022-08-14

问题描述

我的项目中有一个非常简单的视图，其中包含带有带有autofocus属性的元素的表单。

<div class="ui container" style="width: 25%;">
    ...
    <div class="ui segment">
        <h1 class="ui header">Log</h1>
        <form class="ui form" method="POST">
            <div class="field">
                <label>ID</label>
                <input autofocus id="id_input" type="text" name="id" placeholder="ID-########">
            </div>
            <div class="field">
                <label>Serial Number</label>
                <input id="serial_input" type="text" name="serial" placeholder="Serial Number">
            </div>
            <div class="field">
                <button type="submit" class="ui teal button fluid">Submit</button>
            </div>
        </form>
    </div>
    ...
</div>

<script>
    $(document).ready(function() {
        
        $('#id_input').on('keydown',function(e) {
            if(e.keyCode == '13') {
                e.preventDefault();
                $('#serial_input').focus();
            }
        });
        
    });
</script>

问题在于，autofocus属性似乎在页面加载时根本不执行任何操作。它不关注元素。 在尝试找出原因时，我碰巧按了F5键以重新加载页面，并立即在浏览器中切换了选项卡，并且成功了！

我尝试在其他浏览器上重现此内容：

  • 当前浏览器：Chrome（84.0.4147.135）-如果选项卡处于非活动状态，自动对焦始终有效
  • MS Edge Chromium（84.0.522.63）-如果选项卡处于非活动状态，则自动对焦始终有效
  • MS Edge（42.17134.1098.0）-自动对焦根本不起作用
  • Internet Explorer（11.1304.17134.0）-自动对焦根本不起作用

我的问题是为什么会这样，怎么解决？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

attributesattributesattributesautofocusautofocushtml