如何为 Ionic 1 输入类型设置最大长度？答案

【问题标题】：How to set maxlength for Ionic 1 input type?如何为 Ionic 1 输入类型设置最大长度？
【发布时间】：2017-10-19 15:53:30
【问题描述】：

maxlength HTML5 属性在移动设备上无法正常用于文本输入字段。如果启用数字键盘，它可以工作，但在使用文本键盘时它不起作用。

代码：

<ion-content class="p-l-10 p-r-10 had-header form_page">
<form ng-submit="vm.addAdvance()">
  <div class="list">
    <label class="item item-input InputFormFull">
      <span class="input-label">{{'note_message' | translate}}</span>
       <input type="text" placeholder="{{'notes_message' | translate}}" 
        ng-model="vm.advance.description" id="field2" ng-change="vm.fillStarted()" size="5" maxlength="5" required>
    </label>
    <button class="button trans-but m-t-10" type="submit">{{'save_message' | translate}}</button>
  </div>
</form>

【问题讨论】：

你能把你的代码放在一个 plunker 中重现这个吗？
但它在浏览器中运行良好，那么问题是什么
@tanmay 浏览器端正常工作，但移动端不工作
@tanmay 手机键盘不工作的原因是什么
@Ragu 对不起，这就是我要说的，如果不亲眼看到它，我们不可能知道发生了什么，这是不可能的，因为它在浏览器中运行良好

标签： angularjs ionic-framework

【解决方案1】：

可能重复：Input maxlength does not work on Android -Ionic

尝试创建自己的指令：

    myApp.directive('limitChar', function() {
    'use strict';
    return {
        restrict: 'A',
        scope: {
            limit: '=limit',
            ngModel: '=ngModel'
        },
        link: function(scope) {
            scope.$watch('ngModel', function(newValue, oldValue) {
                if (newValue) {
                    var length = newValue.toString().length;
                    if (length > scope.limit) {
                        scope.ngModel = oldValue;
                    }
                }
            });
        }
    };
})

HTML：

<input type="text" limit-char limit="5">

【讨论】：