如何显示 Django 表单 Textarea (models.TextField) 的实时文本分析？答案

【问题标题】：How can I show realtime text analysis of a Django form Textarea (models.TextField)?如何显示 Django 表单 Textarea (models.TextField) 的实时文本分析？
【发布时间】：2016-09-09 00:01:45
【问题描述】：

好的，所以我有一个模型类Recipe 和一个基于Recipe (via forms.ModelForm) 的表单类AddRecipeForm。

表单显示在我的 html 模板中并且有效，但我想实现一种特殊类型的表单验证。基本上，当用户输入他/她的成分/方向时，我想对一些大文本输入字段进行一些文本处理。

我的代码可以计算出成分文本中所有数量（数字）的位置，并识别和分类所有单位（例如“lbs.”、“gr”等）。 --> 我希望能够在add_recipe.html 中的表单旁边基本上有一个文本框，它可以实时执行此文本处理（通过突出显示、粗体等）。

但是，我真的不知道该怎么做。我一直在阅读有关通过AJAX、jquery、“django 频道”或django 的ModelForm.clean() 方法进行实时表单验证的信息，但我不确定哪个是最好的或从哪儿开始。任何指针/建议都会很棒！

这是我的（简化的）代码：

models.py

class Recipe(models.Model):
    recipe_name = models.CharField(max_length=128, default='')
    description = models.CharField(max_length=1024)
    ingredients_text = models.TextField(max_length=2048*2)
    instructions_text = models.TextField(max_length=2048*4)

forms.py

class AddRecipeForm(forms.ModelForm):
    class Meta:
        model = Recipe
        fields = '__all__'

views.py

def add_recipe(request):

    if request.method == "POST":
        add_recipe_form = AddRecipeForm(request.POST)
        if add_recipe_form.is_valid():
            recipe = add_recipe_form.save()
            recipe.save()
            return HttpResponseRedirect('/recipes/detail/{}/'.format(recipe.id))
        else:
            return HttpResponse('Invalid values :( Try again?')
    else:
        add_recipe_form = AddRecipeForm()

    context = {
        'add_recipe_form': add_recipe_form,
    }

    return render(request, 'home/add_recipe.html', context)

home/templates/home/add_recipe.py（html模板）

旁注：我正在使用materialize 框架，所以我正在使用一个小助手来制作表单，因此 CSS 不会与 django 冲突 - 如果需要，我可以停止使用它...

{% extends "home/index.html" %}
{% block content %}
{% load materialize %}
    <h2> Add a Recipe </h2>
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
    <div class="row">
        <p>{{add_recipe_form.ingredients_text|as_material:"s12 m6"}}</p>
        <div class="col s12 m6 textbox">  TODO (realtime validation textbox)  </div>
    </div>
    <div class="row">
        <p>{{add_recipe_form.instructions_text|as_material:"s12 m6"}}</p>
        <div class="col s12 m6 textbox"> TODO (realtime validation textbox) </div>
    </div>

        <input type="submit" value="Submit" class="waves-effect waves-light btn"/>
    </form>
{% endblock %}

【问题讨论】：

这一切都可以在客户端使用 Javascript 进行处理，实际上不需要通道或使用表单清理方法。很难确切地说你应该做什么，但一般的想法是在你想要监控的文本输入上添加一个事件监听器。查看您可以使用的可用输入事件：w3schools.com/js/js_events_examples.asp
是否要过滤字段中的结果？什么是文本处理？
@Aison 通过文本处理，我的意思是例如查找所有数字，将数字短语转换为数字（'two' --> 2），并识别和清理数量（例如，'T.' --> 'tbsp.'）。还清理任何空白问题、格式等。示例：2 个半蛋黄，搅拌过 --> '2 1/2 蛋黄，搅拌过'，其中突出显示'2 1/2'

标签： jquery python django forms

【解决方案1】：

不要涉及 Django 的 Form 类，也不要担心 django-channels。您只需要设置一个简单的 API，它接受文本字段中任何内容的 JSON 并返回处理后的文本结果。 JavaScript 将负责通过 AJAX 调用 API 并对响应进行处理。

不是 100% 清楚你对处理后的文本做了什么，但如果你用“2 1/2”替换“两个半”这个词，我可以看到服务器用一个键值对响应{"two and half": "2 1/2"} 并允许 JavaScript 查找和替换该文本。

【讨论】：