python - 如何在 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>