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>
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>
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…
Galaxy Tab S2
Android Version: 6.0.1
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.
Same thing but for type number, do you have a solution working with ionic 2? Badly need some help.
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>
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
Yes, Chrome does not seem to respect it with a “number” type
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.
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.