maxlength在带有引导程序的html表单输入字段中不起作用 [英] maxlength not working in html form input field with bootstrap

问题描述

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

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

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

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.

推荐答案

不是由引导程序引起的. maxlength仅适用于type 文本，电子邮件，搜索，密码的<input> >， tel 或 url .请参见 MDN .

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.

这就是为什么maxlength无法与您的<input type="number" maxlength="2">

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

概念证明:

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

此处-> http://jsfiddle.net/7ba2oys7/

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

这篇关于maxlength在带有引导程序的html表单输入字段中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！