Maxlength 使用 Angular JS 不适用于输入类型文本

Posted 2023-05-09

【中文标题】Maxlength 使用 Angular JS 不适用于输入类型文本

【英文标题】：Maxlength using angular JS is not working for input type text

【发布时间】：2019-09-09 15:13:34

【问题描述】：

我想使用angularJS 为input 元素设置Max-length，但它对我不起作用。以下是我尝试过的。

 <div class="billcutofdate vLine vLineRight" id="SAPExecutiveBillDate">
            <a><i class="fa fa-calendar-check-o" aria-hidden="true"></i> Billing Cut-off Date <span class="badge">BillCutdate</span></a>
            <div class="setcutofdate">
                <div class="inputNumber clearfix"><input ng-maxlength="2" type="number" step="1" value="0" class="form-control" ng-model="BillCutdateSet" /></div>
                <button class="btn btn-default customBtn" ng-click="changeBillDate()"><i class="fa fa-calendar-check-o" aria-hidden="true"></i> Set Date</button>
            </div>
        </div>

谁能告诉我为什么它不工作，因为我是 angularJS 的新手

更新

再现错误

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.5/angular.min.js"></script>








<input ng-minlength="1" ng-maxlength="2" min="1" max="31" type="number" step="1" value="0" class="form-control" ng-model="BillCutdateSet" />

【问题讨论】：

不起作用是什么意思？如果您尝试验证表单，它所说的 angularjs 方式是否有效？如果您希望浏览器不让用户输入更多内容，请使用 maxlength 属性 + ng-maxlength 进行 angularjs 验证

@f-CJ：不工作意味着我可以添加超过 2 个数字的字符数字。查看我尝试过的更新问题

ng-maxlength 不会阻止这种情况，html 属性 maxlength 会这样做

好的，但是我们如何使用angularJS来做到这一点

甚至 html 属性都不起作用

【参考方案1】：

这是一个简单的功能，但有时浏览器会在输入 type=number 时感到困惑。

因此，通过从Here 中获取一些参考信息，请参阅 Raghavendra 的回答。我尝试了这个并实现了它。

<input ng-minlength="1" ng-maxlength="2" min="1" max="31" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" readonly="readonly" type="number" step="1" value="0" class="form-control" ng-model="BillCutdateSet" />