Input maxlength does not work on Android -Ionic

Question

I have an input field and also i need to stop the user from typing more than the allowed character.

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

It is working in browser.But not working on android devices?

Answer 1

I noticed that maxlength doesn't work on some version of Android. you can try to handle the maxlength in your controller.

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

and you can call the function in your template/view

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

Answer 2

Thanks for all your answers.Your answers didn't me a give a proper solution.Then i have created a directive for that.

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 3

Thanks to @Muhsin. Updated to match with 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);
                    }
                }
            });
        }
    };
});

Example

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

Answer 4

Try This define the variable in the controller $scope object and use it in HTML

Controller

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

Html

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

Answer 5

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

Below is the code snippet for Ionic2 with angular

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

Reference: http://jagadeeshmanne.blogspot.in/2017/08/ionic-2-angular-maxlength-issue-in.html