IPhone Returning Same Keydown Event For (hash And 3) And (Asterisk And 8)

Am working on phone validation and have a requirement of auto formatting the input with phone no and only allow numeric characters to be added . However when i try to restrict the

Solution 1:

  on('keydown keypress',function (e){});

First, triggers twice on iOS (no clue why), and bind fails on FireFox, so just use $().keypress.

Your filtering was letting through the right keycodes for the numbers you wanted, but, not catching the characters you needed to catch, at first I had a solution going which used e.orginialEvent.keyIdentifier to go after the misbehaving keys, but this failed dramatically on firefox.

In looking for a solution to that problem I found and modified code from this page about keycodes and charcodes in Firefox.

  $(formSelector).keypress(function (e) {
     var k = e.keyCode || e.charCode;
     var c = e.charCode;
     var isArrow = (c == 0 && k >= 37 && k <= 40);
     var isSpecial = ((k == 8) || (k == 9) || (k == 127)) || isArrow;   // backspace, tab, delete
     var isOK = (k >= 48 && k <= 57) ;  // numbers
     return isOK || isSpecial;
   });

Live Versions:

Good Version, Tested on: iOS, Chrome, Firefox, Tested

keyIdentifier version, Failed on: Firefox

Solution 2:

Try

<input type="number">

or

<input pattern="[0-9]">

Solution 3:

You could do: <input oninput="filter(this,'1|2|3|4|5|6|7|8|9|0')">
And have this function in you list:
function filter(`obj,allowed) { var allowed = split("|");
var c = 0 for(c; c < allowed.length; c++) {
oqj.value=obj.value.replace(allowed[c],"")
}
}