Where is maxLength on ion-input?

In ionic 2 how to you set the maxLength on a textbox? We need to limit text input to match our data model. I’m aware I can use Angular2 validation, but shouldn’t this be handled in the control? Thanks.

Anybody? How can you set maxLength on an Input tag in Ionic? I need to restrict text entry on some fields. thanks.

Have you tried it out? All the valid input properties and events are supported with ionInput

    <ion-item>
      <ion-label color="primary">MaxLength is 4</ion-label>
      <ion-input type="text" maxlength="4" placeholder="try it out"></ion-input>
    </ion-item>

2 Likes

yes, I have. deploy your example to android device. it doesn’t work.

Hmm, could you provide a more complete example?
I deployed a minimal example of

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label color="primary" stacked>Stacked Label</ion-label>
      <ion-input type="text" maxlength="4" placeholder="Password Input"></ion-input>
    </ion-item>
  </ion-list>
</ion-content>

Using 2.0.0 and did not have an issue on android.

Here’s my sample page. it’s similar to yours…see the user name input.

<ion-content padding>
  <ion-item>
    <ion-label fixed>Username</ion-label>
    <ion-input type="text" maxlength="3" placeholder="user name"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label fixed>Password</ion-label>
    <ion-input type="password" value="" [(ngModel)]="user.password"></ion-input>
  </ion-item>
  <button ion-button primary (tap)="login()">Login</button>
</ion-content>

More info:

when I debug in VS Code, and select “simulate Android in browser”, it works…text entry is limited to 3 characters. When I debug and deploy to Android device I can enter unlimited characters in the ion-input. it’s like the maxlength attribute is ignored on the device. I can enter unlimited characters until I hit the end of the input. very strange…

Device info:

Galaxy Tab S2
Model: SM-T813
Android Version: 6.0.1

Ionic Info:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.7.0
Xcode version: Not installed

Hmm,I tested this with multiple version of android, ionic-angular(2.0.0 final - 2.1.0), and device types and have not been able to recreate.

Even using a stand alone example

<ion-input type="text" maxlength="3"></ion-input>

And it limited it correctly. So I’m not 100% why it’s not working on your end.

1 Like

Hello,

Same thing but for type number, do you have a solution working with ionic 2? Badly need some help.

Thanks.
Ashley

we can use input type as a tel. Because “mhartington” way is working for input type as a text and telephone number.

<ion-input type="tel" maxlength="3"></ion-input>
1 Like

Maxlength=“18” for ion-Input type “number” appears to be respected on trident (IE11) but not Chrome (v56). Want to enter a tel number (and limit length so that it doesn’t turn into an exponential number) also in Browser so type “tel” is not an option as non-numerics accepted :frowning:

Yes, Chrome does not seem to respect it with a “number” type

2 Likes

I faced same issue, maxlength native property does not work on Android devices. So I created one custom maxlength directive and solved my issue. I have published it as npm package you can refer the following link to use it.

1 Like

can we use your package on ion-textarea ?

Thanks @KokilaBawankar. You saved my day.

Hey Kokila! Good work, but there’s one issue - the user can keep on typing beyond the max length. It just isn’t visible. Here I set the max length to 5 just to show. The user also has to delete all the extra letters before being able to delete the visible text.

If you can sort that out - you would be a saviour for many people.

It would be great to get a permanent fix for this issue, cos it seems to have plagued people for years.

Data entry on native mobile devices suck. We dumped IONIC and just created Angular 7 SPA. Works great…especially with Service Worker. And you get all the control input goodness you expect from the modern browsers.