如何设置元素焦点？表单提交后文本框重获焦问题求助

嘿，我来帮你搞定这个困扰！你遇到的核心问题是：表单提交会触发页面刷新，这会导致你写的焦点代码要么被刷新覆盖，要么根本没机会执行。咱们一步步来解决：

先纠正你之前的几个小问题 #

• 你写的document.getElementByID是拼写错误，正确的是document.getElementById（注意Id是小写d）
• 把onblur加在提交按钮上完全不对，onblur是元素失去焦点时触发，和提交行为无关；应该把提交相关的逻辑绑定在表单的onsubmit事件上

方案1：不刷新页面提交（推荐，用户体验更好） #

如果你的表单提交不需要刷新页面，我们可以用JS阻止表单默认提交行为，处理完提交逻辑后再让文本框获得焦点。这里分原生JS和jQuery两种写法：

原生JS版本 #

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
</head>
<body>
    <form id="myForm" method="POST" action="mon_am.php">
        <input type="text" name="mon_am" id="textfield">
        <input type="submit" name="submit" value="提交">
    </form>

    <script>
        const form = document.getElementById('myForm');
        const textfield = document.getElementById('textfield');

        form.addEventListener('submit', function(e) {
            // 阻止表单默认提交行为
            e.preventDefault();
            
            // 这里可以写你的提交逻辑，比如用fetch发送AJAX请求
            fetch(this.action, {
                method: this.method,
                body: new FormData(this)
            }).then(response => {
                // 提交成功后清空文本框并聚焦
                textfield.value = '';
                textfield.focus();
            }).catch(error => {
                console.error('提交出错:', error);
            });
        });

        // 页面加载时先让文本框聚焦
        window.addEventListener('DOMContentLoaded', function() {
            textfield.focus();
        });
    </script>
</body>
</html>

jQuery版本（请先在页面中引入jQuery库） #

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
    <!-- 请在此处引入jQuery库，比如本地的jquery.js文件 -->
</head>
<body>
    <form id="myForm" method="POST" action="mon_am.php">
        <input type="text" name="mon_am" id="textfield">
        <input type="submit" name="submit" value="提交">
    </form>

    <script>
        $(document).ready(function() {
            $('#textfield').focus(); // 页面加载时聚焦

            $('#myForm').submit(function(e) {
                e.preventDefault(); // 阻止默认提交

                // AJAX提交表单
                $.post($(this).attr('action'), $(this).serialize(), function(response) {
                    $('#textfield').val('').focus(); // 清空并聚焦
                }).fail(function(error) {
                    console.error('提交出错:', error);
                });
            });
        });
    </script>
</body>
</html>

方案2：必须刷新页面的场景 #

如果你的业务逻辑必须让表单提交后刷新页面，那我们需要在页面加载完成后让文本框自动获得焦点：

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
</head>
<body>
    <form method="POST" action="mon_am.php">
        <input type="text" name="mon_am" id="textfield">
        <input type="submit" name="submit" value="提交">
    </form>

    <script>
        // 页面加载完成后聚焦文本框
        window.onload = function() {
            document.getElementById('textfield').focus();
        };
    </script>
</body>
</html>

这个方案的原理是：页面刷新后，JS会在所有元素加载完成后执行，强制让文本框获得焦点。

你之前的代码没生效，主要是因为没阻止表单默认刷新，或者事件绑定的位置不对。试试上面的方案，应该就能解决问题啦！

内容的提问来源于stack exchange，提问作者Regan