Question

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

SYSOPER

它在浏览器中工作。但是没有在Android设备上工作？

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

Answer 2

我注意到maxlength在某些Android版本上不起作用。您可以尝试处理控制器中的maxlength。

$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)"

Answer 3

以下是带角度

的Ionic2的代码片段

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.in/2017/08/ionic-2-angular-maxlength-issue-in.html

Answer 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);
}
}

Answer 5

尝试在控制器$ scope对象中定义变量并在HTML

中使用它

<强>控制器

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

<强> HTML

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

Answer 6

感谢@Mhhsin。已更新，以便与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">

输入maxlength在Android -Ionic上不起作用

6 个答案: