iPhone zurück dasselbe Keydown-Ereignis für (Hash und 3) und (Asterisk und 8)

Question

Bin am Telefon Validierung arbeiten und eine Anforderung der automatischen Formatierung der Eingabe mit Telefonnummer und nur numerische Zeichen hinzugefügt werden. Wenn ich jedoch versuche, die Eingabe mit Keydown und Tastendruck zu beschränken, erlaubt IPhone mir, # und * einzugeben. Wenn ich den Keydown-Wert überprüfte, stimmen beide mit 3 bzw. 8 überein (Keycode 51 und 56). Dies funktioniert perfekt in Android-Browsern, schlägt aber auf dem iPhone fehl.

Jeder vor einem ähnlichen Problem.

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

}); 

Ich habe auch ein anderes Verfahren, das vorgeschlagen wurde, in Stackoverflow-Eingang zu binden mit ‚-Eingang property‘ Ereignissen und dann Musterabgleich verwenden. aber das funktioniert im IPhone korrekt, scheitert aber bei Android.

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

Hat jemand eine gemeinsame Lösung für dieses Problem?

Vielen Dank im Voraus

Answer 1

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

Zuerst löst zweimal auf iOS (keine Ahnung warum) und bind nicht auf FireFox, so dass nur $().keypress verwenden.

Ihre Filterung bestand darin, die richtigen Tastencodes für die von Ihnen gewünschten Zahlen durchzulassen, aber ohne die Zeichen zu fangen, die Sie fangen mussten, hatte ich zunächst eine Lösung, die e.orginialEvent.keyIdentifier verwendete, um nach den fehlgeschlagenen Schlüsseln zu suchen. aber das ist auf firefox dramatisch gescheitert.

Auf der Suche nach einer Lösung für dieses Problem habe ich Code aus dieser page about keycodes and charcodes in Firefox gefunden und geändert.

$(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-Versionen:

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

keyIdentifier version, Failed on: Firefox

Answer 2

Sie könnten tun: <input oninput="filter(this,'1|2|3|4|5|6|7|8|9|0')">
Und diese Funktion haben in Ihnen Liste:
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

Versuchen

<input type="number">

oder

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