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

vxf3dgd4  于 2023-01-21  发布在  Go
关注(0)|答案(4)|浏览(310)

我正在寻找一种方法来改变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小部件的递增/递减箭头。

e5nqia27

e5nqia271#

箭头控件是NumberInput小部件的一部分,因此您必须使用它。不幸的是,在当前的HTML中,不支持数字输入字段<input type="number">sizemaxlength属性。
域的宽度更容易破解,你可以简单地覆盖CSS。你可以使用pxch作为单位,这取决于你的要求。要有一个3字符宽的输入框,将'style': 'width:3ch'添加到attrs字典中。我在下面的示例中使用6ch是因为使用3ch时没有为增量留下空间-递减按钮。
要限制输入的字符数,可以使用一个简单的js脚本。
小工具:

widgets = {
    'my_integer': forms.NumberInput(attrs={
        'id': 'number_field',    
        'style': 'width:6ch',
        'oninput': 'limit_input()'
    }),
}

在显示表单的template文件中,添加以下小脚本:

<script type="text/javascript">
    function limit_input() {
        var field = document.getElementById("number_field");
        var max_length = 3;
        if (field.value.length > max_length) {
            field.value = field.value.slice(0, max_length); 
        }
    }
</script>
ncecgwcz

ncecgwcz2#

现在在Django 2.1.7中你可以在NumberInput属性中使用size

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

简单地用attrs={'style': 'width:6ch'}替换attrs也能很好地工作。谢谢Yash Tewari!

nlejzf6q

nlejzf6q3#

当我需要控制输入框的大小和字符数时,我是这样做的(我在这里引用了一个涉及integer字段的特定案例):

在www.example.com上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),], )

在www.example.com上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"在表单级别进行控制。这里有一个参考。

yiytaume

yiytaume4#

您可以设置style字段宽度max最大数目min最小数目,以形成.NumberInput(),如下所示:

widgets = {
    'my_integer': forms.NumberInput(attrs={
        'style': 'width:6ch', # For field width
        'max': '999',         # For maximum number
        'min': '0',           # For minimum number
    }),
}

相关问题