Flask-WTForms 使用 jQuery 移动到下一个表单字段

Question

我有一个 jQuery 脚本，它可以自动将焦点向下移动到输入字段的列。

<script>
$(".input").keyup(function() {
  if (this.value.length > 0) {
    $('.input').eq($('.input').index(this) + 1).focus();
  }
});
</script>

它适用于这个简单的 HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="split4">
  <input type="tell" class="input" maxlength="1">
</div>
<div class="split4">
  <input type="tell" class="input" maxlength="1">
</div>
<h4>text</h4>
<div class="split4">
  <input type="tell" class="input" maxlength="1">
</div>
<div class="split4">
  <input type="tell" class="input" maxlength="1">
</div>

但是，我正在尝试将其应用于使用 WTForms 呈现的表单，但它不起作用

<form action="" method="post" novalidate>
                    <div style="text-align: center">
                        <h3>
                        {{ render_field(form.star, class="input", required=true, size=55, autofocus=true) }}
                        </h3> <br>
                        <h3>
                        {{ render_field(form.serial, class="input", required=true, size=55) }}
                        </h3> <br>
                        <h3>
                        {{ render_field(form.weight, class="input", required=true, size=55, onchange="submit()") }}
                        </h3> <br>
                    </div>
                </form>

我遇到了this answer，但不明白如何实现它。如果有更简单的方法可以将 HTML 表单输入与 Flask 连接，以便我可以添加到本地数据库中，请告诉我。

谢谢！

Answer 1

事实证明，脚本必须与表单位于相同的块内容中...现在一切正常！