iPhone為（hash和3）和（Asterisk和8）返回相同的keydown事件

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'事件綁定輸入，然后使用模式匹配。 但這在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上觸發兩次（不知道為什么），並且在FireFox上bind失敗，所以只需使用$().keypress 。

你的過濾是通過正確的密碼來獲取你想要的數字，但是，沒有捕獲你需要捕獲的字符，起初我有一個解決方案，使用e.orginialEvent.keyIdentifier來追蹤行為不端的密鑰，但這顯然失敗了在Firefox上。

在尋找該問題的解決方案時，我發現並修改了此頁面中有關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

Answer 2

嘗試

<input type="number">

要么

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

Answer 3

你可以這樣做： <input oninput="filter(this,'1|2|3|4|5|6|7|8|9|0')">
並在你的列表中有這個功能：
function filter(`obj,allowed) { var allowed = split("|");
var c = 0 for(c; c < allowed.length; c++) {
oqj.value=obj.value.replace(allowed[c],"")
}
}