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

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

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

Flask-WTForms Using jQuery to Move to Next Form Field

python

jquery

flask

flask-wtforms