输入最大长度在 Android -Ionic 上不起作用答案

【问题标题】：Input maxlength does not work on Android -Ionic输入最大长度在 Android -Ionic 上不起作用
【发布时间】：2016-08-06 21:22:50
【问题描述】：

我有一个输入字段，而且我需要阻止用户输入超过允许的字符。

<input type="text" name="callsign" maxlength="7" >

它可以在浏览器中运行。但不能在 android 设备上运行？

【问题讨论】：

我在一些安卓浏览器上遇到过类似的问题。最好为maxlength使用后备
@Muhsin 尝试使用 ng-maxlength="7"
@MohanGopi:我们可以输入7个以上的字符
@Mushin 所以你需要输入的长度应该正好是我早上 7 点
不。我需要阻止用户输入超过允许的字符。

标签： javascript angularjs html ionic-framework

【解决方案1】：

感谢您的所有回答。您的回答并没有给我一个正确的解决方案。然后我为此创建了一个指令。

directive.js

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

【讨论】：

它不适用于 Android。尝试：使用 maxLength 进行输入。输入第一个。在 maxLength 附近，键入不带空格的字符。您应该能够输入超过 maxLength 的内容。然后，单击下一个输入。第一个上的文字仍在此处。

【解决方案2】：

我注意到 maxlength 不适用于某些版本的 Android。您可以尝试处理控制器中的最大长度。

$scope.validateMaxLength = function(input){
  var inputLen = input.length;
  if (inputLen > 7) return false;
  return true;
}

您可以在模板/视图中调用该函数

<input type="text" ng-model="inputModel" ng-keyup="validateMaxLength(inputModel)"

【讨论】：

我有 50 个输入字段，所以我需要添加 50 个函数。它会影响应用程序的性能。
@RayonDabre 是的，很抱歉错误地将this 放在那里。但实际上，这也适用于那里。
@Muhsin 您可以将长度定义为参数。 function(input, maxLength)

【解决方案3】：

下面是带有角度的 Ionic2 的代码 sn-p

import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
import { Platform } from "ionic-angular";

@Directive({
    selector: '[cMaxLength]'
})
export class MaxLengthDirective {

  @Input('cMaxLength') cMaxLength:any;
  @Output() ngModelChange:EventEmitter<any> = new EventEmitter();

  constructor(public platform: Platform) {
  }

  //keypress event doesn't work in ionic android. keydown event will work but the value doesn't effect until this event has finished. hence using keyup event. 
  @HostListener('keyup',['$event']) onKeyup(event) {
    const element = event.target as HTMLInputElement;
    const limit = this.cMaxLength;
    if (this.platform.is('android')) {
      const value = element.value.substr(0, limit);
      if (value.length <= limit) {
        element.value = value;
      } else {
        element.value = value.substr(0, limit-1);
      }
      this.ngModelChange.emit(element.value);
    }
  }

  @HostListener('focus',['$event']) onFocus(event) {
    const element = event.target as HTMLInputElement;
    if (!this.platform.is('android')) {
      element.setAttribute('maxlength', this.cMaxLength)
    }
  }
}

参考： http://jagadeeshmanne.blogspot.com/2017/08/ionic-2-angular-maxlength-issue-in.html

【讨论】：

【解决方案4】：

<input type="text" [(ngModel)]="newStylePage.title" (input)="maxlength()" name="styleTitle" id="title" >

maxlength(){
if(newStylePage.title>7) {
    newStylePage.title = newStylePage.title.substring(0,7);
}
}

【讨论】：

在if条件下需要检查.length所以会是if(newStylePage.title.length > 7)

【解决方案5】：

试试这个在控制器 $scope 对象中定义变量并在 HTML 中使用它

控制器

myApp.controller('contactCntrl', ['$scope', function($scope) {
      $scope.max = 7;
}]);

HTML

<input type="email" id="cont-sum-1" maxlength={{max}}/>

【讨论】：

【解决方案6】：

感谢@Muhsin。更新以匹配maxlength

.directive('ionMaxlength', function() {
    'use strict';
    return {
        restrict: 'A',
        scope: {
            ngModel: '=ngModel'
        },
        link: function(scope, element, attr) {
            scope.$watch('ngModel', function(newValue, oldValue) {
                if (newValue) {
                    var length = newValue.toString().length;
                    if (length > attr.ionMaxlength) {
                        scope.ngModel = oldValue.substr(0, attr.ionMaxlength);
                    }
                }
            });
        }
    };
});

例子

<input type="text" ng-model="login.email" ion-maxlength="100">

【讨论】：