Where is maxLength on ion-input?

Ionic Framework ionic-v3
1

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.

2

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

3

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

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

5

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.

6

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

7

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>

image
image540×960 1.59 MB

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

1 Like
8

Hello,

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

Thanks.
Ashley

9

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>
3 Likes
10

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:

11

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

2 Likes
12

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
13

can we use your package on ion-textarea ?

14

Thanks @KokilaBawankar. You saved my day.

15

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.

Screenshot_20190711-223342_IMQCS

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.

16

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.

17

facing same issue while validate with number type

18

follow the docs for ionic 4 it will be help full for you. if you can’t do it feel free to reply me

1 Like
19

Already checked this doc, i just want ion-input for mobile number with maxlength=“10” and input type only number

20

Do like this

HTML
<ion-input [(ngModel)]=“number” (ionInput)=“getMax()”>

TS
getMax(){
if(this.number >= 10){
console.log(“Number is greater than 10 or equeal to 10”);
}else{
console.log(“Number is less than 10 digits”);
}
}

have a great day
cheers!!