How to set width and input limit of NumberInput widget for IntegerField in a Django form

Question

I'm looking for a way to change the width of the input box in a Django form.

The model code for a parameter looks like this:

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

And, putting it into a form, the HTML code that is generated is this:

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

And, the box is quite wide - maybe 20 characters.

If I add the code in the definition of the form class Meta:

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

I get a box that is 5-6 characters wide that lets me insert 3 characters and the HTML code changes the type to type='text' and the increment/decrement arrows disappear.

So, what I really want is a 3 character wide box, with a 3 character input limit, having the NumberInput widget's increment/decrement arrows. How do I do this?

Answer 1

The arrow controls are a part of the NumberInput widget, so you'll have to use that. Unfortunately, in current HTML, there is no support for the size and maxlength attributes for the number input field <input type="number">.

The width of the field is easier to hack, you can simply override the CSS. You can use either px or ch as units, depending on what your requirement is. To have a 3 character wide input box, add 'style': 'width:3ch' to the attrs dictionary. I'm using 6ch in the example below because using exactly 3ch leaves no space for the increment-decrement buttons.

To limit the number of characters entered, a simple js script will work. Here's the entire solution.

The widget:

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

Inside your template file displaying the form, add this small script:

<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>

Answer 2

Now in Django 2.1.7 you can use size in NumberInput attrs

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

and just simply replace the attrs with attrs={'style': 'width:6ch'} works very well too. thanks Yash Tewari!

Answer 3

When I need to control the size of an input box and the number of characters, this is how I do it (I am citing a specific case involving an integer field here):

In 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),], )

In 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'}),
            }

As with a maximum value, (I have taken liberty to include it here) we may sometimes need to specify the minimum value as well, which has been shown in the sample codes above. And the width of the integer field can be controlled at the forms level using the widget "NumberInput". A reference here.

Answer 4

You can set style for field width, max for maximum number, min for minimum number to forms.NumberInput() as shown below:

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