ion-input maxlength does not work with actual device keyboards

Ionic version: (check one with “x”) [ ] 1.x [ ] 2.x [ x] 3.x

I’m submitting a … (check one with “x”) [ x] bug report [ ] feature request [ ] support request

Current behavior: The maxlength attribute is not working on ion-input with types other than password. This is only happening on actual devices. Browser and emulators are working just fine.

Expected behavior: The user should not be able to type in any more characters when they reach the maxlength limit.

Steps to reproduce: Cannot reproduce on a browser.

Related code: A sample of the code.

<ion-input type="text" [(ngModel)]="newHomePhone" autocomplete="off" autocorrect="off"
                   autocapitalize="off" spellcheck="false" name="newHomePhone"
                   maxlength="10">
</ion-input>

Other information: I have tried different input types (Email, text, …) but only password works. This is affecting both Android and iOS platforms. I was getting the same issue even before cordova 7.0.0 update. So it should not be related to the new cordova. An interesting observation was that when I was debugging the app and used my desktop keyboard (using chrome remote device for Android), the maxlength limit was being applied. But at the same time when I used the device keyboard, it was not working!

Ionic info:

Your system information:

Cordova CLI: 7.0.0 
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.7
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.2.0
Xcode version: Xcode 8.3.2 Build version 8E2002

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:14 (1 by maintainers)

Top GitHub Comments

2reactions

paul33868commented, Aug 16, 2017

Hi, I know it’s an ugly hack, buy hopefully it’s usefull for someone:

import { Directive, Input } from “@angular/core”;

@Directive({ selector: ‘[limit-to]’, host: { ‘(blur)’: ‘_onBlur($event)’, ‘(keyup)’: ‘_onKeyup($event)’, ‘(focus)’: ‘_onFocus($event)’, } }) export class LimitToDirective { @Input(‘limit-to’) limitTo; _onBlur(e) { const limit = +this.limitTo; if (e.target.value.length > limit) { e.target.value = e.target.value.substring(0, 15); } }; _onFocus(e) { const limit = +this.limitTo; if (e.target.value.length > limit) { e.target.value = e.target.value.substring(0, 15); } }; _onKeyup(e) { const limit = +this.limitTo; if (e.target.value.length > limit) { e.target.value = e.target.value.substring(0, 15); } }; }

1reaction

mannejkumarcommented, Aug 18, 2017

I have written custom directive to make it work in android devices.

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