3

I am making an app using ionic framework -v1, now i found out when deploying my app to IOS the app seems to works perfectly fine at first.

But when i enter a space (using the mobile number keypad) in my input=[number] field the app starts flickering and loses the scopes with the space in them. Later when i want to push my data to angularfire it also completely stops working and wont let me push my data.

My input is as simple as this:

<input type="number" name="" ng-model="info.DriversLicensenr">

My customer would like the field to have spaces in them, but also the numbers keypad should show up when pressed in the app.

Is there any way to allow spaces? or to modify another input type to reach the desired effect?

Jurjen Folkertsma
  • 272
  • 3
  • 20
  • Possible duplicate of [HTML5 input type=number value is empty in Webkit if has spaces or non-numeric characters?](https://stackoverflow.com/questions/18677323/html5-input-type-number-value-is-empty-in-webkit-if-has-spaces-or-non-numeric-ch) – Ramesh Rajendran May 30 '17 at 09:42
  • I tested this, it does open another kind of number pad, this isn't the problem. But this different number pad does not have a space bar so i'm still having the same issue. – Jurjen Folkertsma May 30 '17 at 09:49

3 Answers3

4

This kind of input will open a number pad on mobile device. However, you will have to check that the user doesn't type other caracters than numbers.

<input type="text" inputmode="numeric" ng-model="ctrl.dLicence"/>

EDIT

<input type="text" pattern="[0-9\s]*"/>

This opens a number pad, but doesn't limit to numbers only.

Gabe Hiemstra
  • 269
  • 1
  • 14
Zooly
  • 4,736
  • 4
  • 34
  • 54
0

No that's not possible i will suggest you to use input type text and then use ng-pattern to validate it is number or not. This won't stop you from inserting characters but will show error it there's a character or any other special characters.

Vikash Kumar
  • 1,712
  • 1
  • 11
  • 17
0

To restrict input to only numbers or space , use below code

<input type="text" inputmode="numeric" oninput="formatNumber(event)"/>

 function formatNumber(event){
    let value =  event.target.value || '';
    value = value.replace(/[^0-9 ]/,'');
    event.target.value = value;
 }
BKS
  • 143
  • 7