Flask-jQueryを使用して次のフォームフィールドに移動するWTForms

jko0401

入力フィールドの列にフォーカスを自動的に移動する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>

私はこの答えに出くわしましたが、それを実装する方法がわかりません。HTMLフォーム入力をFlaskに接続して、ローカルデータベースに追加できるようにする簡単な方法がある場合は、それもお知らせください。

ありがとうございました!

jko0401

結局のところ、スクリプトはフォームと同じブロックコンテンツ内にある必要があります...すべてが機能するようになりました!

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

WTForms-flask:フォームフィールド名とデータを辞書に整理する

分類Dev

FlaskとFlask-WTFormsを使用してフォームをループしている間、csrfラベルを非表示にする方法はありますか?

分類Dev

Flask / WTFormsで繰り返しサブフォームの数を変えてフォームを作成する

分類Dev

Flask-WTFormsを使用して、htmlのフォームセクションのスタイルを設定するにはどうすればよいですか?

分類Dev

Flask-WTFormsを使用して、htmlのフォームセクションのスタイルを設定するにはどうすればよいですか?

分類Dev

FlaskとWTFormsを使用したフォームのリンクに関する問題

分類Dev

Flask-WTFormsを使用してDRYの方法で反復フォーム要素を作成するにはどうすればよいですか?

分類Dev

WTForms RadioFieldサブフィールドを使用して、Flaskで画像を表示します

分類Dev

Flask-WTFormsの2つの日付フィールドを比較するためのフィールド検証

分類Dev

Flask-Adminのフォームの作成/編集フィールドに固定値を設定する方法

分類Dev

編集フォームにWTFormsとFlaskを事前入力します

分類Dev

Flask、wtformsは空のフォームをポストバックします

分類Dev

フォームを介してFlaskメソッドにテーブルデータを送信する

分類Dev

FlaskのWTformで動的フィールドを作成する

分類Dev

フォームを使用せずにファイルをアップロードし、APIとしてFlaskを使用するPythonスクリプト

分類Dev

Flask-ファイルを作成してフォルダに動的にアップロードします

分類Dev

POSTフォームとFlaskの<a>を使用して別のページにリンクする方法[解決済み]

分類Dev

Flaskの複数選択フォームフィールドにアクセスする

分類Dev

FlaskとWTFormsを使用してフォームデータを保持しながらリダイレクトする方法は?

分類Dev

wtforms + flask今日の日付をデフォルト値として

分類Dev

Flaskを使用して新しいページにJSONとしてHTMLフォームデータを表示する

分類Dev

Flask-検証に合格しないwtformsを使用したWTFファイルのアップロード

分類Dev

wtformフォームコンストラクターを使用してモデルを編集するflask-wtf:フォームの事前入力

分類Dev

SelectMultipleFieldの動的な数をwtf-flaskフォームに追加します

分類Dev

フォームなしでFlaskにデータを送信する

分類Dev

Flask-WTForms-2つのルート、フォームを2回呼び出す必要がありますか?

分類Dev

Pythonのflaskでgetlistを使用して同じ名前の複数のhtmlフィールドを取得する

分類Dev

Flaskを使用してディレクトリにファイルをアップロードするときの内部サーバーエラーコード500

分類Dev

Flask / WTForms-フォームをインラインにするにはどうすればよいですか?

Related 関連記事

  1. 1

    WTForms-flask:フォームフィールド名とデータを辞書に整理する

  2. 2

    FlaskとFlask-WTFormsを使用してフォームをループしている間、csrfラベルを非表示にする方法はありますか?

  3. 3

    Flask / WTFormsで繰り返しサブフォームの数を変えてフォームを作成する

  4. 4

    Flask-WTFormsを使用して、htmlのフォームセクションのスタイルを設定するにはどうすればよいですか?

  5. 5

    Flask-WTFormsを使用して、htmlのフォームセクションのスタイルを設定するにはどうすればよいですか?

  6. 6

    FlaskとWTFormsを使用したフォームのリンクに関する問題

  7. 7

    Flask-WTFormsを使用してDRYの方法で反復フォーム要素を作成するにはどうすればよいですか?

  8. 8

    WTForms RadioFieldサブフィールドを使用して、Flaskで画像を表示します

  9. 9

    Flask-WTFormsの2つの日付フィールドを比較するためのフィールド検証

  10. 10

    Flask-Adminのフォームの作成/編集フィールドに固定値を設定する方法

  11. 11

    編集フォームにWTFormsとFlaskを事前入力します

  12. 12

    Flask、wtformsは空のフォームをポストバックします

  13. 13

    フォームを介してFlaskメソッドにテーブルデータを送信する

  14. 14

    FlaskのWTformで動的フィールドを作成する

  15. 15

    フォームを使用せずにファイルをアップロードし、APIとしてFlaskを使用するPythonスクリプト

  16. 16

    Flask-ファイルを作成してフォルダに動的にアップロードします

  17. 17

    POSTフォームとFlaskの<a>を使用して別のページにリンクする方法[解決済み]

  18. 18

    Flaskの複数選択フォームフィールドにアクセスする

  19. 19

    FlaskとWTFormsを使用してフォームデータを保持しながらリダイレクトする方法は?

  20. 20

    wtforms + flask今日の日付をデフォルト値として

  21. 21

    Flaskを使用して新しいページにJSONとしてHTMLフォームデータを表示する

  22. 22

    Flask-検証に合格しないwtformsを使用したWTFファイルのアップロード

  23. 23

    wtformフォームコンストラクターを使用してモデルを編集するflask-wtf:フォームの事前入力

  24. 24

    SelectMultipleFieldの動的な数をwtf-flaskフォームに追加します

  25. 25

    フォームなしでFlaskにデータを送信する

  26. 26

    Flask-WTForms-2つのルート、フォームを2回呼び出す必要がありますか?

  27. 27

    Pythonのflaskでgetlistを使用して同じ名前の複数のhtmlフィールドを取得する

  28. 28

    Flaskを使用してディレクトリにファイルをアップロードするときの内部サーバーエラーコード500

  29. 29

    Flask / WTForms-フォームをインラインにするにはどうすればよいですか?

ホットタグ

アーカイブ