maxlength not working with input type="number" ionic

Question

I try to define maxlength of a number input.

 <label class="item item-input">
 <i class="icon ion-android-call placeholder-icon"></i>
 <input type="number"  placeholder="Phone number " maxlength="8">
 </label>

How can i reesolve it please.

Thats true. You can use type `tel` then it works. By the way, if you use your app for ios then you didn't have `number` type. — Simon Schüpbach, Apr 22 '16 at 21:10

Mohsin Muzawar · Accepted Answer · 2016-04-22T21:21:52.307

8

   <input type="tel " maxlength="6">

edited Apr 22 '16 at 21:21

answered Apr 22 '16 at 21:13

Mohsin Muzawar

1,202
9
9

1

This is not an acceptable answer if using a web browser on the desktop as there is nothing to stop you adding letters into the field. There seems currently to be no solution for this scenario in Ionic so far :-( – Kieran Ryan Jun 26 '17 at 13:20
Okay this link makes things clearer along with a workaround using maxlength and the pattern attribute of the input tag: https://stackoverflow.com/questions/18510845/maxlength-ignored-for-input-type-number-in-chrome/18510925#18510925 – Kieran Ryan Jun 26 '17 at 14:14

Syed Muhammad Abid · Answer 2 · 2018-08-10T09:24:24.483

4

 <input type="tel" pattern="[0-9]*" maxlength="6">

This will validate the numbers pattern too :)

edited Aug 10 '18 at 09:24

answered Aug 10 '18 at 09:12

Syed Muhammad Abid

101
1
2

maxlength not working with input type="number" ionic

2 Answers2