WTForms：如何将 "autofocus" 属性添加到 StringField

Question

我对 WTForms、Flask-WTF 比较陌生。我无法弄清楚如何从表单定义中简单地将 HTML5 属性 "autofocus" 添加到表单字段之一。我想在 Python 代码中而不是在 Jinja 模板中这样做。这是我的资料：

class NameForm(Form):
    name1 = StringField("Nom d'utilisateur :",
                    validators=[Required(), Length(1, 16)])
    pwd1 = PasswordField("Mot de passe :",
                     validators=[Required(), Length(1, 16)])
    mail1 = StringField("Compte GMail du calendrier :",
                    validators=[Required(), Email()])
    submit = SubmitField('Envoyer')

我只想将 "autofocus" 属性添加到字段 "name1"。

我在路线中试过这个：

@app.route('/', methods=['GET', 'POST'])
def form():
    name1 = None
    pwd1 = None
    mail1 = None
    msg = None
    # Tests
    Name_Form_kwargs = {"name1": "" ,"autofocus" :"true"}
    Name_Form = NameForm(**Name_Form_kwargs)
    print Name_Form.name1
    # 
    form = NameForm()
    .....

但这只是改变了字段值，并没有添加任何属性:

<input id="name1" name="name1" type="text" value="">

我从 SO 那里阅读了很多答案并尝试了各种解决方案，但我被卡住了。感谢您的帮助。

Answer 1

只有你使用：

autofocus=true

在你的file.html

Answer 2

它必须由 file.html Jinja 模板完成。所以声明如下：

{{ form.input1(autofocus=true) }}

这会将单个 autofocus 属性放入您的 html 代码中。

Answer 3

您不能通过表单的 Python 定义来完成，我找不到。实现的方法是在页面加载时添加一些Javascript来关注你想要的字段。

我有一个使用 Flask-Bootstrap 的项目（所以 jQuery 已经加载）这意味着您的模板需要包含一个

{% block scripts %}{% endblock %}

在您的表单模板中，将以下内容放在末尾：

{% block scripts %}
{{ super() }}
<script type="text/Javascript">
    $("input#my_focus_field_id").focus()
</script>
{% endblock %}

Answer 4

我发现，您可以将参数 render_kw 添加到表单 class 的字段中，您可以在其中添加用于渲染的所有关键字，包括自动对焦。

所以我现在的表格 class 是：

class CheckForm(FlaskForm):
    """
    Check-in or check-out users.
    """
    checkmode = RadioField('checkmode', validators=[DataRequired()], choices=[('in', 'Check-In'), ('out', 'Check-Out')])
    datainput = StringField('Name', validators=[DataRequired()], render_kw={'autofocus': True})
    submit = SubmitField('Submit')

这与 wtf.quick_form() 的预期一样呈现，并将光标放置在加载 wtforms 版本 2.1 和 flask-wtf 版本 0.14.2 的 StringField 中。

WTForms：如何将 "autofocus" 属性添加到 StringField

WTForms : How to add "autofocus" attribute to a StringField

python

wtforms

flask-wtforms