Question

我正在寻找一种方法来改变Django形式的输入框的宽度。

参数的模型代码如下所示：

my_integer = models.IntegerField('Window', default=50)

并将其放入表单中，生成的HTML代码为：

<input id="id_my_integer" name="my_integer" value="50" type="number">

并且框很宽 - 可能是20个字符。

如果我在表单类Meta的定义中添加代码：

widgets = {
  'my_integer': forms.TextInput(attrs={'size':'3', 'maxlength':'3'}),
}

我得到一个5-6个字符宽的框，允许我插入3个字符，HTML代码将类型更改为type ='text'，增量/减量箭头消失。

所以，我真正想要的是一个3字符宽的框，具有3个字符的输入限制，具有NumberInput小部件的递增/递减箭头。我该怎么做？

Answer 1

箭头控件是NumberInput小部件的一部分，因此您必须使用它。不幸的是，在当前的HTML中，不支持数字输入字段size的{{1}}和maxlength属性。

字段的宽度更容易破解，您可以简单地覆盖CSS。您可以使用<input type="number">或px作为单位，具体取决于您的要求。要使用3个字符宽的输入框，请将ch添加到'style': 'width:3ch'字典中。我在下面的示例中使用attrs因为正好使用6ch不会为递增 - 递减按钮留下空间。

要限制输入的字符数，可以使用简单的3ch脚本。这是整个解决方案。

小部件：

js

在显示表单的widgets = { 'my_integer': forms.NumberInput(attrs={ 'id': 'number_field', 'style': 'width:6ch', 'oninput': 'limit_input()' }), }文件中，添加以下小脚本：

template

Answer 2

现在在Django 2.1.7中您可以在NumberInput属性

中使用size

widgets = {
    'bank_account_number': form.NumberInput(attrs={'size': '20'}),
}

，只需用attrs={'style': 'width:6ch'}替换attrs效果也很好。谢谢Yash Tewari！

Answer 3

当我需要控制输入框的大小和字符数时，这就是我的方法（我在这里引用了涉及 integer 字段的特定情况）：

在models.py中：

from django.core.validators import MinValueValidator, MaxValueValidator

class SomeTable(models.Model):
    field1 = models.CharField(max_length=10)
    field2 = models.IntegerField(default=1, validators=[MinValueValidator(1), MaxValueValidator(9999),], )

在forms.py中：

from .models import SomeTable

class SomeForm(forms.ModelForm):
    class Meta:
        model = SomeTable
        fields = ('field1', 'field2')
        widgets = {
             'field2': forms.NumberInput(attrs={'style': 'width: 100px'}),
            }

与最大值一样（我已经自由地将其包括在此处），有时我们可能还需要指定 minimum （最小）值，如上面的示例代码所示。使用小部件“ NumberInput ”可以在表单级别控制整数字段的宽度。参考文献here。

如何在Django表单中为IntegerField设置NumberInput小部件的宽度和输入限制

3 个答案: