maxlength not working in html form input field with bootstrap

Question

I am using bootstrap and currently created form with 5 tabs in it. I have a form field called layer time in which I have 3 input fields namely hours, minutes,seconds. I want to set the maxlength of 2 for each field.But it is not working when I specify it. Please help me out with this. Following is my code for bootstrap form.

<ul class="nav nav-pills">
    <li class="active"><a href="#basic-layer-tab" data-toggle="tab"><b>Basic Layer Data</b><i class="fa"></i></a></li>
    <li ><a href="#basic-calcuations-tab" data-toggle="tab"><b>Basic Calculations</b><i class="fa"></i></a></li>
    <li ><a href="#doping-N2-tab" data-toggle="tab"><b>Doping-Nitrogen</b><i class="fa"></i></a></li>
    <li ><a href="#doping-Al-tab" data-toggle="tab"><b>Doping-Aluminium</b><i class="fa"></i></a></li>
    <li ><a href="#other-calcuations-tab" data-toggle="tab"><b>Other Calculations</b><i class="fa"></i></a></li>
</ul>

<form action="insertlayer.php" id="newlayerform" role="form" method="post" class="form-horizontal" >

        <div class="tab-content">

            <div class="tab-pane active" id="basic-layer-tab">

               <div class= "panel panel-default">
                    <div class="panel-body">

                        <div class="container-fluid">

                            <div class="form-group">
                                <label for="layer_time" class="col-sm-2 control-label" style="color:red">Layer Time</label>
                                <div class="col-sm-4">
                                    <div class="input-group">
                                        <input type="number" class="form-control" name="layer_time_hours" id="layer_time_hours" maxlength="2">
                                        <div class="input-group-addon"><b>hh</b></div>
                                        <input type="number" class="form-control" name="layer_time_minutes" id="layer_time_minutes" maxlength="2">
                                        <div class="input-group-addon"><b>mm</b></div>
                                        <input type="number" class="form-control" name="layer_time_minutes" id="layer_time_minutes" maxlength="2">
                                        <div class="input-group-addon"><b>ss</b></div>
                                    </div><!--end of input group--> 
                                </div><!--end of column class-->
                            </div>

                        </div><!--end of container-fluid-->

                    </div><!--end of panel body-->
                </div><!--end of panel default-->

            </div><!--end of tab-pane basic-layer-tab-->

</form> <!--end of form-->  

For ease of understanding, I have just provided only information in one tab and one form field in the first tab. However there are 5 tabs in my form and each tab has many form fields.

Solution

It is not bootstrap that are causing this. maxlength does only apply to <input>'s of type text, email, search, password, tel or url. See MDN.

Thats why maxlength not works with your <input type="number" maxlength="2">

Proof of concept :

text : <input type="text" maxlength="2">
number : <input type="number" maxlength="2">

here -> http://jsfiddle.net/7ba2oys7/

Comments

[sravan kumar]

perfect, Thanks a lot :)