我正在寻找一种方法来改变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
小部件的递增/递减箭头。
4条答案
按热度按时间e5nqia271#
箭头控件是
NumberInput
小部件的一部分,因此您必须使用它。不幸的是,在当前的HTML中,不支持数字输入字段<input type="number">
的size
和maxlength
属性。域的宽度更容易破解,你可以简单地覆盖CSS。你可以使用
px
或ch
作为单位,这取决于你的要求。要有一个3字符宽的输入框,将'style': 'width:3ch'
添加到attrs
字典中。我在下面的示例中使用6ch
是因为使用3ch
时没有为增量留下空间-递减按钮。要限制输入的字符数,可以使用一个简单的
js
脚本。小工具:
在显示表单的
template
文件中,添加以下小脚本:ncecgwcz2#
现在在Django 2.1.7中你可以在NumberInput属性中使用
size
简单地用
attrs={'style': 'width:6ch'}
替换attrs也能很好地工作。谢谢Yash Tewari!nlejzf6q3#
当我需要控制输入框的大小和字符数时,我是这样做的(我在这里引用了一个涉及integer字段的特定案例):
在www.example.com上models.py:
在www.example.com上forms.py:
与最大值一样,(我冒昧地将其包含在这里)我们有时也需要指定minimum值,这在上面的示例代码中已经显示过。并且整数字段的宽度可以使用小部件“NumberInput"在表单级别进行控制。这里有一个参考。
yiytaume4#
您可以设置
style
为字段宽度,max
为最大数目,min
为最小数目,以形成.NumberInput(),如下所示: