Django是否存在支持逐个输入自定义字符串的多值表单字段？

Django官方确实没有内置这种开箱即用的表单字段，但有两种靠谱的实现方式：

一、使用第三方库快速实现 #

推荐用 django-taggit，它原本是做标签系统的，但完全符合你的需求：支持用户输入自定义字符串、回车确认添加、已添加项可删除，还能轻松和ArrayField对接。

步骤： #

1. 安装依赖：

pip install django-taggit

2. 配置settings.py：

INSTALLED_APPS = [
    # ... 其他已有APP
    'taggit',
]

3. 自定义标签管理器适配ArrayField（默认taggit用独立标签表，这里改成将内容存在ArrayField中）：

from django.db import models
from taggit.managers import TaggableManager
from taggit.models import GenericTaggedItemBase, TagBase

class ArrayTag(TagBase):
    pass

class ArrayTaggedItem(GenericTaggedItemBase):
    tag = models.ForeignKey(ArrayTag, on_delete=models.CASCADE, related_name="tagged_items")

class YourModel(models.Model):
    custom_strings = models.ArrayField(models.CharField(max_length=255), blank=True)
    tags = TaggableManager(through=ArrayTaggedItem, blank=True)

    # 同步标签内容到ArrayField
    def save(self, *args, **kwargs):
        self.custom_strings = [tag.name for tag in self.tags.all()]
        super().save(*args, **kwargs)

4. 在表单中使用TaggitWidget：

from django import forms
from taggit.forms import TaggitWidget
from .models import YourModel

class YourForm(forms.ModelForm):
    class Meta:
        model = YourModel
        fields = ['tags']
        widgets = {
            'tags': TaggitWidget(attrs={'placeholder': '输入内容后按回车添加'}),
        }

前端会自动渲染出你示例中的输入效果：用户输入回车添加内容，点击标签上的叉号删除，提交后内容会同步到custom_strings字段。

二、手动自定义实现（无第三方依赖） #

如果不想引入第三方库，可以自己通过前端JS+自定义表单字段实现：

1. 前端模板代码 #

<div class="multi-input-container">
    <input type="text" id="custom-input" placeholder="输入后按回车添加">
    <div id="tag-list" class="tag-list"></div>
    <input type="hidden" name="custom_strings" id="hidden-values">
</div>

<script>
const input = document.getElementById('custom-input');
const tagList = document.getElementById('tag-list');
const hiddenInput = document.getElementById('hidden-values');
let values = [];

// 监听回车事件添加标签
input.addEventListener('keydown', function(e) {
    if (e.key === 'Enter' && input.value.trim()) {
        const value = input.value.trim();
        if (!values.includes(value)) {
            values.push(value);
            renderTags();
            updateHiddenInput();
            input.value = '';
        }
        e.preventDefault();
    }
});

// 渲染已添加的标签
function renderTags() {
    tagList.innerHTML = '';
    values.forEach((val, index) => {
        const tag = document.createElement('span');
        tag.className = 'tag';
        tag.innerHTML = `${val} <button data-index="${index}">×</button>`;
        tag.querySelector('button').addEventListener('click', function() {
            values.splice(index, 1);
            renderTags();
            updateHiddenInput();
        });
        tagList.appendChild(tag);
    });
}

// 更新隐藏输入框的值，用于表单提交
function updateHiddenInput() {
    hiddenInput.value = JSON.stringify(values);
}
</script>

<style>
.tag-list {
    margin-top: 8px;
}
.tag {
    display: inline-block;
    background: #e0e0e0;
    padding: 4px 8px;
    border-radius: 4px;
    margin-right: 8px;
    margin-bottom: 4px;
}
.tag button {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 4px;
}
</style>

2. 自定义表单字段 #

import json
from django import forms

class MultiStringField(forms.Field):
    def to_python(self, value):
        if not value:
            return []
        try:
            return list(json.loads(value))
        except json.JSONDecodeError:
            raise forms.ValidationError('输入格式错误')

    def validate(self, value):
        super().validate(value)
        # 可添加自定义验证规则，比如限制单个字符串长度
        for item in value:
            if len(item) > 255:
                raise forms.ValidationError('每个字符串不能超过255个字符')

class YourForm(forms.ModelForm):
    custom_strings = MultiStringField()

    class Meta:
        model = YourModel
        fields = ['custom_strings']

提交表单时，custom_strings字段会直接接收字符串列表，和模型的ArrayField完美适配。

内容的提问来源于stack exchange，提问作者nbro