Input maxlength does not work on a real Android phone

ionic-v1
1

I have codes as follows - One input as a stand alone input field, the other input field is within the list.

Each input field has maxlength=“5” to limit the max char input as 5 characters.
"maxlength=‘5’ " works on Chrome, but it does not work on a real Android phone.

‘ng-maxlength’ does not work either on a real Android phone.

When I install the app on an Android phone, I can enter more than 5 characters on each field. Am I missing something?

   <ion-content has-bouncing="true">

        <label class="item item-input">
            <input type="text" maxlength="5" placeholder="Maximum 5 chars."/>
       </label>

      <div class="list">
         <label class="item item-input">
            <input type="text" maxlength="5" placeholder="Maximum 5 chars."/>
        </label>
    </div></ion-content>
1 Like
2

try using ng-maxlength
https://docs.angularjs.org/api/ng/input/input[text]

1 Like
3

As I stated in my original post, ng-maxlength does not work either.

4

Upps, sorry.

You could add a watcher to your model-change. in the watcher you get the old and new value -> if new value > maxlength -> set it to old value.

$scope.$watch(function () { return $scope.myModel; }, function (newValue, oldValue) {});
1 Like
5

Your solution worked. Thanks.

My code looks like this:
It is an example to limit max 10 chars for the “user.data1” input field.


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

        if (newValue.length > 10){
            $scope.user.data1 = oldValue;
        }
    });
3 Likes
6

FYI, it does work now

8

Hello,

How can we achieve same in ionic 2?

Thanks,
Ashley

9

you can subscribe to onChange or onInput of an input

<input (change)="yourFunction($event)" ...>

class MyComponent {
   ...

  yourFunction(event) {
    .....
  }
}
10

@bengtler I am still very confused about how to stop the event (numbers getting entered in the input field) with the change event. I have used keypress before in a custom directive but failed to work on android devices. Can you please help?

Ashley

11

@ashley_shookhye
I also had similar issue. I have created custom directive to make it work with ionic2 on android devices. It may useful to others who are having similar issue.
Visit for more info: http://jagadeeshmanne.blogspot.in/2017/08/ionic-2-angular-maxlength-issue-in.html

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)
    }
  }
}
1 Like
12

ok cool. let me check that. thanks a lot. appreciate that you have replied my thread.

Ashley

13

works like a charm on android. adapted it to several other validations. thanks a bunch.

14

As far i know, one issue will be there with email validation. If you enter proper email first and then add the characters in the middle of the field, it may be the invalid email as we are substringing the value.

15

I tried but its not working for me.
Controller.js

$scope.$watch(“selectedregn”,function(newValue, oldValue){
if (newValue.length > 10){
$scope.user.data1 = oldValue;
}
});

html
input type=“text” ng-init=“setFocus(‘searchregbox’)” id=“searchregbox” placeholder="{{translation[19].templateurl_search_reg}}" ng-trim=“false” ng-pattern="/^[a-zA-Z0-9]+$/" ng-minlength=“4” ng-required=“true” name=“selectedregn” autocomplete=“off” class=“regSuggestions” bs-typeahead=“regSuggestions” ng-model=“selectedregn” ng-change=“RegSearch(‘regn’,selectedregn)” ng-blur=“blur=true” typeahead-show-hint=“true” typeahead-min-length=“3”

Please let me know if i am missing anything
TIA