javascript - iPhone returning same keydown event for (hash and 3) and (Asterisk and 8) - Stack Overflow

admin管理员组

文章数量:1435859

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 input using keydown and keypress, IPhone is allowing me to enter # and * . When i checked the keydown value , they both are same with 3 and 8 respectively (keycode 51 and 56). This works perfectly in Android browsers but fails in iPhone.

Anyone faced similar issue.

$(formSelector + ' input[name^="phone"]').on('keydown keypress',function (e) {         
    // Allow: backspace, delete, tab, escape, and enter  
    if ( e.keyCode == 46 || e.keyCode == 8 || e.keyCode == 9 || e.keyCode == 27 || e.keyCode == 13 ||   
        // Allow: Ctrl+A  
        (e.keyCode == 65 && e.ctrlKey === true) ||   
        // Allow: home, end, left, right  
        (e.keyCode >= 35 && e.keyCode <= 39)
    ) {                
        // let it happen, don't do anything  
        return;  
    } else {  
        // Ensure that it is a number and stop the keypress  
        if (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 96 || e.keyCode > 105 ) ) {  
            e.preventDefault();   
        }              

});  

I also tried one other method which was suggested in stackoverflow to bind input with 'input propertychange' events and then use pattern matching. but this works correct in IPhone , but fails in Android.

$(formSelector + ' input[name^="phone"]').bind('input propertychange', function() {  
   var text = $(this).val();  
   if (isNaN(text)) {  
       $(this).val(text.replace(/[^\d]/gi, ''));  
   }  
});

Does anyone have a mon solution for this problem ??

Thank you in advance

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 input using keydown and keypress, IPhone is allowing me to enter # and * . When i checked the keydown value , they both are same with 3 and 8 respectively (keycode 51 and 56). This works perfectly in Android browsers but fails in iPhone.

Anyone faced similar issue.

$(formSelector + ' input[name^="phone"]').on('keydown keypress',function (e) {         
    // Allow: backspace, delete, tab, escape, and enter  
    if ( e.keyCode == 46 || e.keyCode == 8 || e.keyCode == 9 || e.keyCode == 27 || e.keyCode == 13 ||   
        // Allow: Ctrl+A  
        (e.keyCode == 65 && e.ctrlKey === true) ||   
        // Allow: home, end, left, right  
        (e.keyCode >= 35 && e.keyCode <= 39)
    ) {                
        // let it happen, don't do anything  
        return;  
    } else {  
        // Ensure that it is a number and stop the keypress  
        if (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 96 || e.keyCode > 105 ) ) {  
            e.preventDefault();   
        }              

});  

I also tried one other method which was suggested in stackoverflow to bind input with 'input propertychange' events and then use pattern matching. but this works correct in IPhone , but fails in Android.

$(formSelector + ' input[name^="phone"]').bind('input propertychange', function() {  
   var text = $(this).val();  
   if (isNaN(text)) {  
       $(this).val(text.replace(/[^\d]/gi, ''));  
   }  
});

Does anyone have a mon solution for this problem ??

Thank you in advance

• javascript
• iphone
• events
• keycode

Share Improve this question Follow edited Jul 4, 2013 at 14:11 JaredMcAteer 22.6k55 gold badges5252 silver badges6666 bronze badges asked Jul 4, 2013 at 11:27 AnoojAnooj 28633 silver badges1313 bronze badges 4

• 1 Does the jQuery demo show any differences in the events? – tom Commented Jul 4, 2013 at 11:39
• jQUeryDemo shows the same keycode. 3 and # are same and 8 and * are same. But the one differnce i found in mobile vs puter browser is that the shifkey bees true in puter when entering # and * , but the same is false in mobile because we are not using any shift key – Anooj Commented Jul 4, 2013 at 11:44
• Are all the other properties (e.g. shiftKey) also the same? – tom Commented Jul 4, 2013 at 11:46
• Shiftkey remains false in mobile – Anooj Commented Jul 4, 2013 at 11:47

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

  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 einialEvent.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

Try

<input type="number">

or

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

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],"")
}
}

本文标签： javascriptiPhone returning same keydown event for (hash and 3) and (Asterisk and 8)Stack Overflow