入力maxlengthはAndroidで動作しません-Ionic

Question

私は入力フィールドを持っていますが、私はユーザーに許可された文字以上を入力させないようにする必要があります。

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

Android搭載端末では動作しません。

Answer 1

おかげで私に私はそのためのディレクティブを作成した適切なsolution.Thenを与えませんでした。

directive.js @Muhsinに

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

Androidの一部のバージョンでmaxlengthが動作しないことに気付きました。 コントローラで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

これは、コントローラの$スコープオブジェクト内の変数を定義してみて、HTML

コントローラ

でそれを使用するテンプレート/ビューで関数を呼び出すことができます

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

Html

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

Answer 4

あなたは（あなたのケースでは7）の限界に達したときに入力するためにあなたのモデルにウォッチャを追加し、より多くの文字を防ぐことができます。次の例では、このコードはユーザー名を最大7文字に制限します。すべてのanswers.Yourの答えを

$scope.$watch("user.name", function(newValue, oldValue){ 

     if (newValue.length > 7){ 
      $scope.user.name = oldValue; 
     } 
    }); 

HTML

<input type="text" name="userName" ng-model="user.name"/> 

Answer 5

感謝。以下は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"> 

Answer 6

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

と一致するように更新角度

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

参考とIonic2ためのコードスニペットです： http://jagadeeshmanne.blogspot.in/2017/08/ionic-2-angular-maxlength-issue-in.html