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

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和属性。maxlength<input type="number">

字段的宽度更容易破解，您可以简单地覆盖 CSS。您可以使用px或ch作为单位，具体取决于您的要求。要获得 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>