iPhone返回相同的keydown事件（hash和3）和（Asterisk和8） [英] iPhone returning same keydown event for (hash and 3) and (Asterisk and 8)

问题描述

我正在进行电话验证，并且要求使用电话号码自动格式化输入，并且只允许添加数字字符。但是，当我尝试使用键下键和按键限制输入时，iPhone允许我输入＃和*。当我检查keydown值时，它们分别与3和8相同（键码51和56）。这在Android浏览器中完美无缺，但在iPhone中失败。

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.

任何人面临类似问题。

$(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();   
        }              

});  

我还尝试了一种在stackoverflow中建议的方法，将输入与input propertychange事件绑定，然后使用模式匹配。但是这在iPhone中正常，但在Android中失败。

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 common solution for this problem ??

提前谢谢你

推荐答案

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

首先，在iOS上触发两次（不知道为什么）和 bind 在FireFox上失败，所以只需使用 $（）。keypress 。

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

通过正确的键码为您想要的数字，但是，没有捕捉你需要捕获的字符，起初我有一个解决方案，使用e.orginialEvent.keyIdentifier去行为不正确的键后，但这在firefox上大幅度的失败了。

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.

在寻找解决这个问题的解决方案时，我发现并修改了这个关于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;
   });

现场版本：

良好版本，经过测试：iOS，Chrome，Firefox，已测试

keyIdentifier版本，失败：Firefox

这篇关于iPhone返回相同的keydown事件（hash和3）和（Asterisk和8）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！