只允许在angularjs / ionic中键入一定数量的字符

时间:2015-03-26 05:01:58

标签: html angularjs validation angularjs-directive ionic-framework

我有这个文本字段,我需要阻止用户输入超过允许的字符。让我们说我希望用户只键入10个字符,如果他输入更多文本字段将不会采用它。它必须在达到字符限制后停止输入..

我知道有ng-maxlength但它不会阻止用户键入超过允许的字符但我可以给出错误消息。有没有办法做到这一点。

我的文字字段

   <div class="form-group" ng-class="{ 'has-error' : submitted && (thirdPartyForm.beneAcc.$pristine || thirdPartyForm.beneAcc.$invalid )}">
                <label  class="labelColor"><h5><b>Beneficiary Account/Card Number*</b></h5></label>
                 <input  ng-keyup="validateCreditCard();" onkeypress="return ((event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || event.charCode == 8 || event.charCode == 45 || event.charCode == 32 || (event.charCode >= 48 && event.charCode <= 57))" type="{{inputType}}" ng-click="inputClick()"    id="beneAcc" name="beneAcc" ng-model="data.beneAcc" class="form-control"  ng-blur="validateDesitinationAccount(data.origin, data.beneAcc);" required>
                <span class="help-inline" ng-show="submitted && (thirdPartyForm.beneAcc.$pristine || thirdPartyForm.beneAcc.$invalid )">Beneficiary Account No cannot be left blank.</span>
                <span class="help-inline" ng-show="validateAccFlag" style="color:red" >{{validateMsgStr}}</span>
                <span class="help-inline" style="color:red;"  ng-if="LkrValidation">You cannot transfer Sri Lankan Rupees to foreign currency accounts.</span>
                <span class="help-inline" style="color:red;"  ng-show ="accountNoFlag">{{accountNoValidateMsg}}</span>
                </div>

3 个答案:

答案 0 :(得分:5)

如果要将输入限制为特定长度,则使用maxlength而不是 NG-最大长度。

<input ng-model="num1" type="text" maxlength="3"></input>

指     http://jsfiddle.net/xmkLmLms/

答案 1 :(得分:1)

这是来自他们的文档。

<input type="text"
   ng-model=""
   [name=""]
   [required=""]
   [ng-required=""]
   [ng-minlength=""]
   [ng-maxlength=""]
   [pattern=""]
   [ng-pattern=""]
   [ng-change=""]
   [ng-trim=""]>

您可能希望这样做:

<input type="text" maxlength="10"/>

答案 2 :(得分:0)

使用maxlength

例如:maxlength="10"

以及ng-trim="false"也用于计算空格。