按下Tab键时JavaScript事件监听器未触发表单更新问题

我有一个包含公式的表格，点击「更新」按钮时表格可正常更新。希望按下Tab键时自动更新表格，因此添加了keydown事件监听器。测试发现Tab键能触发alert，但changeActionUpdate函数未生效（该函数在更新按钮中可正常使用）。

前端JavaScript代码 #

<script>
    function changeActionUpdate() {
        document.getElementById("vehicleform").action = '{{url_for("salaries.salaries_update")}}';
    }

    document.addEventListener('keydown', function(event){
        var code = event.keyCode || event.which;
        if (code === 9) {  
            changeActionUpdate();
            /*alert("Hello Tab key")*/
        }
    });
</script>

后端Flask路由代码 #

@salaries_bp.route('/salaries/update', methods=['POST'])
@login_required
def salaries_update():
    """
     Update a collection in the database
    """
    x = {}
    if request.method == "POST":
        ref = db.company.find_one({"GlobalId": "global"})

        x["Salaries_Header1"] = (int(ref["basic_year"])) 
        x["Salaries_Header2"] = (int(ref["basic_year"]) + 1 )
        x["Salaries_Header3"] = (int(ref["basic_year"]) + 2 )
        x["Salaries_Header4"] = (int(ref["basic_year"]) + 3 )
        x["Salaries_Header5"] = (int(ref["basic_year"]) + 4 ) 

        x = get_form_to_dict(request.form) # 省略公式部分

        db.salaries.update_one({"GlobalId": "global"}, {"$set": x})
    x = db.salaries.find_one({"GlobalId": "global"})
    return redirect(url_for('salaries.salaries')) 
    return render_template("salaries-wages.html", data=x)

问题核心是：点击「更新」按钮时，按钮会自动触发表单提交；但Tab键触发事件时，你只修改了表单的action属性，没有执行表单提交操作。

修改后的JavaScript代码如下：

<script>
    function changeActionUpdate() {
        document.getElementById("vehicleform").action = '{{url_for("salaries.salaries_update")}}';
    }

    document.addEventListener('keydown', function(event){
        var code = event.keyCode || event.which;
        if (code === 9) {  
            // 阻止Tab默认的焦点跳转行为
            event.preventDefault();
            // 修改表单action
            changeActionUpdate();
            // 手动提交表单
            document.getElementById("vehicleform").submit();
        }
    });
</script>

额外注意事项：

• 必须调用event.preventDefault()，否则浏览器会优先执行Tab的焦点切换逻辑，可能干扰表单提交。
• 确认页面中表单的ID确实是vehicleform，和代码中的选择器一致。

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