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

Posted 2023-03-05

【中文标题】输入最大长度在 Android -Ionic 上不起作用

【英文标题】：Input maxlength does not work on 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 点

不。我需要阻止用户输入超过允许的字符。

【参考方案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">