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

时间:2015-06-17 09:28:20

标签: html5 forms twitter-bootstrap html-form

我正在使用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个选项卡,每个选项卡都有许多表单字段。

1 个答案:

答案 0 :(得分:8)

导致此问题的不是引导程序。 maxlength仅适用于<input> 文字电子邮件搜索的<{1}},< em>密码, tel url 。请参阅MDN

这就是为什么type不适用于您的maxlength

概念证明:

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

这里 - &gt;的 http://jsfiddle.net/7ba2oys7/