Restrict Input


#1

Hi all,
I need help, i am stucked i want to restrict inputs to specific patterns.
e.g
i have an input for email i don’t want to allow user to input special characters except “@_-.” .
similarly i don’t want to allow user to input alphabets in .

the real challenge is android because event.preventDefault() doesn’t fires on keyup and keydown,keypress returns wrong keycode,charcode.

i need valid solution for both platforms ios and android.


#2

use custom validation with regex


#3

thanks sir,
i am currently using this for validation but my question is can i restrict inputs…?? can i avoid user to write alphabets in field.


#4

you can try
<ion-input type="number"> but i dont know if it works, havent tested that one
also check other input options


#5

thanks sir,

In input type=“number” we can type “e” and “.” . the only way i found is through key events.but there is a big mess with key events in android keypress and keydown returns first value empty and on the other side keyup returns first value but on keyup function preventDefault doesn’t works.


#6

if you want only numbers you can use “tel” so there will be only a telephone call keyboard


#7

:slight_smile: currently i am using “tel” but on some android phones like samsung user can easily switch keyboard and type whatever he wants.so this solution also fails.


#8

@FnnHuman is there any proper solution for my problem…?? i can share code if you ask


#9

Hello,
I have been asking same for a while and i have got no replies. I didnt want the user to enter “.” in an input field but so far no luck. I am just forced to display the user an error.

Ashley


#10

Split two-way binding is one way of doing this.


#11

Paste should be disabled at first, followed by, keyup event should be listened with a method.
In .html file

<ion-input type="tel"
onpaste=“return false;”
(keyup)=“keyUpChecker($event)”
[(ngModel)]=“myVariable”>

In .ts file

keyUpChecker(ev) {
let elementChecker: string;
let format = /[ !~@#$%^&*()_+×÷°-={N}[]{};’:"\|,.<>/?]/;
elementChecker = ev.target.value;
if (format.test(elementChecker)) {
this.myVariable= elementChecker.slice(0, -1);
}
}