iPhone retournant le même événement keydown pour (hachage et 3) et (Asterisk et 8)

Question

Je travaille sur la validation du téléphone et ai besoin d'un formatage automatique de l'entrée avec le numéro de téléphone et j'autorise uniquement l'ajout de caractères numériques. Cependant quand j'essaye de limiter l'entrée using le keydown et la pression, IPhone me permet d'entrer # et *. Quand j'ai vérifié la valeur du keydown, ils sont tous les deux identiques avec respectivement 3 et 8 (keycode 51 et 56). Cela fonctionne parfaitement dans les navigateurs Android, mais échoue dans l'iPhone.

Toute personne rencontrant un problème similaire.

$(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 a essayé également une autre méthode qui a été suggérée dans stackoverflow à se lier avec entrée événements « PropertyChange d'entrée » et en utilisant ensuite mise en correspondance de motif. mais cela fonctionne correctement dans IPhone, mais échoue dans Android.

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

Est-ce que quelqu'un a une solution commune pour ce problème?

Nous vous remercions à l'avance

Answer 1

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

Tout d'abord, déclenche deux fois sur iOS (aucune idée pourquoi), et bind échoue sur FireFox, donc il suffit d'utiliser $().keypress. Votre filtrage faisait passer les bons codes pour les nombres que vous vouliez, mais, n'attrapant pas les caractères que vous deviez attraper, j'ai d'abord eu une solution qui utilisait e.orginialEvent.keyIdentifier pour aller après les clés mal agencées, mais cela a échoué de manière spectaculaire sur Firefox.

En cherchant une solution à ce problème, j'ai trouvé et modifié le code de ce 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; 
    }); 

Versions en direct:

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

keyIdentifier version, Failed on: Firefox

Answer 2

Vous pouvez faire: <input oninput="filter(this,'1|2|3|4|5|6|7|8|9|0')">
Et cette fonction vous listez:
function filter(`obj,allowed) { var allowed = split("|");
var c = 0 for(c; c < allowed.length; c++) {
oqj.value=obj.value.replace(allowed[c],"")
}
}

Answer 3

Essayez

<input type="number">

ou

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