html - maxlength 在带有 Bootstrap 的 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

导致此问题的不是 Bootstrap 。 maxlength仅适用于 <input>的 type 文本、电子邮件、搜索、密码、电话或url。参见 MDN .

这就是为什么 maxlength不适用于您的 <input type="number" maxlength="2">

概念验证:

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

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