Question

我正在创建一个简单的烧瓶网络应用程序，它本质上是一系列输入表单。我成功地使用wtforms制作了一个测试表单，代码如下：

from wtforms import Form, StringField, validators, IntegerField, FileField, SelectMultipleField

class FooInputs(Form):
    foo = StringField('Foo', default='bar')
    jazz = SelectMultipleField('Jazz', choice=[(...

在此模板中呈现：

<!doctype html>
<html>
<head>
  {% from "_formhelpers.html" import render_field %}
</head>

<body>
  <form method=post enctype=multipart/form-data>
    <dl>
      {% for FIELD in FIELDS %}
        {{ render_field(form[FIELD]) }}
      {% endfor %}
    </dl>
    <p><input type=submit value=Next>
  </form>
</body>
</html>

其中_formhelpers.html可以在Flask文档中找到：http://flask.pocoo.org/docs/0.12/patterns/wtforms/。（FIELDS是通过烧瓶处理程序传入的字段名称列表）

此后我一直在尝试添加以下功能：当逗号输入到输入字段时，逗号被抑制，而是弹出一个额外的输入字段。我能够使用这个jQuery脚本在没有使用jinja2或wtforms的测试html上完成这项工作：

$(":input").live("keydown", function() {
    if (event.which===188) {
        $(this).parent().prepend($(this).clone());
        $(this).prev().focus();
        return false
    }
});

但是，当我将此脚本引入我的表单时，如下所示：

<!doctype html>
<html>
<head>
  {% from "_formhelpers.html" import render_field %}
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
  </script>
</head>

<body>
  <form method=post enctype>
    <dl>
      {% for FIELD in FIELDS %}
        {{ render_field(form[FIELD]) }}
      {% endfor %}
    </dl>
    <p><input type=submit value=Next>
  </form>
  <script type="text/javascript" src="/static/scripts/variable_form.js">
  </script>
</body>
</html>

除了一个主要问题外，这一切似乎都有效，在表单的输入字段中没有出现任何字符。我可以输入一个逗号，然后会出现一个新字段，但我永远无法输入表单上的任何输入字段。

我怀疑这与wtforms＆＃39;底层的JavaScript，但我不确定如何处理这个问题。我考虑过放弃使用wtforms，但我确实喜欢它的功能，并且更愿意坚持我已经开发的内容。

我对网络开发完全不熟悉，所以我可能错过了一些明显的东西。如果您有任何想法，请告诉我。

Answer 1

您可能需要为事件侦听器返回true作为默认值（例如，不是逗号）。在您的示例代码中，它看起来像：

$(":input").live("keydown", function() {
    if (event.which===188) {
        $(this).parent().prepend($(this).clone());
        $(this).prev().focus();
        return false;
    } else {
        return true;
    }
});

基本的想法是你正在捕获输入中的所有“keydown”事件，但是在原始代码中，如果keydown事件是逗号，它只返回一个值，其中所有其他keydown事件都没有返回该事件听众功能。

添加jQuery脚本后，输入字段（使用wtforms创建）中断

1 个答案: