javascript - iPhone 为 (hash and 3) 和 (Asterisk and 8) 返回相同的按键事件

Question

我正在处理电话验证，需要使用电话号码自动格式化输入，并且只允许添加数字字符。但是，当我尝试使用 keydown 和 keypress 限制输入时，iPhone 允许我输入 # 和 * 。当我检查 keydown 值时，它们分别与 3 和 8 相同(键码 51 和 56)。这在 Android 浏览器中完美运行，但在 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”事件绑定(bind)，然后使用模式匹配。但这在 iPhone 中工作正常，但在 Android 中失败。

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

有没有人对这个问题有通用的解决方案？？

提前致谢

Answer 1

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

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

你的过滤是让你想要的数字通过正确的键码，但是，没有捕捉到你需要捕捉的字符，起初我有一个解决方案，它使用 e.orginialEvent.keyIdentifier 来追踪行为不端的键，但是这在 Firefox 上失败了。

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

现场版:

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

keyIdentifier version, Failed on: Firefox