Restrict entry to alphanumeric characters and space for Ion Input in Ionic


#1

Hi,
I need to restrict the entry to Alphabets, Numbers and Spaces in Ion input field. We tried capturing key press events and tried using patterns as below

keyUpChecker(ev) {
let elementChecker: string;
let format = /^[a-z0-9 ]*$/i;
elementChecker = ev.target.value;
console.log(ev.target.value);
if(!format.test(elementChecker)){
this.vesselName = elementChecker.slice(0, -1);
}
}

And in HTML as

<ion-input type=“text” maxlength="50"
onpaste=“return false;”
(keyup)="keyUpChecker($event)"
placeholder=“Enter Name”
[(ngModel)]=“vesselName”>

But, we still are able to change the cursor position and enter special characters


#2

I think this is a hard problem, unless you know exactly which platform you are targeting. If you want something that works on all platforms, you might need to do a lot of work.


#3

Hi Aaron,

I am intending to deploy the app on Android and iOS. I would prefer atleast a solution which would work smooth on Android.

Thanks and Regards,
Nithin Mathew


#4

Try:

  public onKeyUp(event: any) {

    let newValue = event.target.value;

    let regExp = new RegExp('^[A-Za-z0-9? ]+$');

    if (! regExp.test(newValue)) {
      event.target.value = newValue.slice(0, -1);
    }
  }

Is there any way to restrict characters in ionic input type=text or number