maxlength在带引导程序的html表单输入字段中不起作用

Question

我正在使用bootstrap和当前创建的表单,其中包含5个选项卡.我有一个称为图层时间的表单字段,其中我有3个输入字段,即小时,分钟,秒.我想为每个字段设置最大长度为2.但是当我指定它时它不起作用.这个你能帮我吗.以下是我的bootstrap表单代码.

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

为了便于理解,我刚刚在第一个选项卡的一个选项卡和一个表单字段中提供了信息.但是,我的表单中有5个选项卡,每个选项卡都有许多表单字段.

Answer 1

它不是引导它的引导程序.maxlength它仅适用于<input>"第type 文本,电子邮件,搜索,密码,电话或网址.见MDN.

这就是为什么maxlength不适合你<input type="number" maxlength="2">

概念证明:

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

这里 - > http://jsfiddle.net/7ba2oys7/