Beschränken Sie den Benutzer Eingabezeitraum in Eingabefeld auf Android

Question

Ich möchte den Benutzer von der Eingabe von Sonderzeichen in einem Nummernfeld auf einem Android-Gerät beschränken. Das "." (Punkt) Zeichen übergibt Werte in einem "onkeypress" -Ereignis wie erwartet nicht.

Mit <input type="text"> kann ich den Benutzer von der Eingabe eines Sonderzeichens blockieren.

Aber mit <input type="number"/> kann ich nicht den Benutzer von der Eingabe von Punktschlüssel einschränken.

Versucht mit vielen Stapelüberlaufpfosten. Aber immer noch kein Glück.

Unten ist der Code ich versuche:

HTML

<input type="number" ng-model="registrationField.mobilenumber" tabindex="0" no-special-character="^[0-9-]*$" > 

JS

app.directive("noSpecialCharacter", [function() { 
    return { 
     restrict: "A", 
     link: function(scope, elem, attrs) { 
      var limit = parseInt(attrs.limitTo); 
      var regex = RegExp(attrs.noSpecialCharacter); 
      angular.element(elem).on("keydown", function(e) { 
       if(e.key == "Unidentified"){ 
        e.preventDefault(); 
        return false; 
       } 
      }); 
     } 
    } 
}]) 

ich keydown Ereignis verwenden, weil keypress Ereignis nicht auf Presse Auslösen Punkt-Taste in der Zifferntastatur.

Außerdem erhalte ich die e.key als Unidentified, wenn Benutzer die Punkttaste eingegeben hat. Also versuche ich damit zu manipulieren.

Ich habe versucht mit dem letzten Wert trimmen, wenn der Benutzer die Punkttaste eingegeben hat und das funktioniert auch nicht.

Bitte schlagen Sie einen möglichen Weg vor.

Versucht den obigen Code in Android Nexus 5X Gerät.

Answer 1

Bearbeiten: Ich habe die Frage nicht richtig verstanden, diese Lösung wird nicht auf mobilen Geräten funktionieren, das ist einfach JavaScript-Lösung für das Eingabefeld.

<div> 
<input onkeypress='return event.charCode >= 48 && event.charCode <= 57' type="number" placeholder="Input Value" /> 
</div> 

Hier jsfiddle http://jsfiddle.net/tZPg4/16784/

Answer 2

gut funktioniert, ich weiß, das ist eine schlechte Lösung, da sie die $timeout Service, aber zumindest etwas verwendet, nachdem diese den ganzen Tag kämpfen ..

Zunächst Alle setzen den Typ auf type="tel" (weiß nicht warum, aber das gleiche funktioniert nicht mit type="number") registrieren Sie die On-Change-Ereignis:

<input type="tel" ng-model="$ctrl.numberField" ng-change="$ctrl.onChange()" /> 

Dann in Ihrem Controller die Winkel $timeout Service injizieren und definieren die onChange() Funktion:

onChange() { 
    // the below code is relevant for Android platform in cordova 
    if (typeof cordova != 'undefined' && cordova.platformId == "android") { 
     // filter all available input characters in Android NumPad mode 
     var r = new RegExp("[#/;,N\(\)\.\*\-]"); 
     if (r.test(this.data)) { 
      // perform the filter after the digest cycle of angular is complete 
      this.$timeout(() => { 
       this.data = this.data.replace(r, ""); 
      }, 100); 
    } 
} 

Alle die seltsamen Zeichen im RegExp Objekt sehen sind diejenigen, die Android in der NumberPad Zustand seiner Tastatur platzieren können.

Hoffe es hilft jemandem!

Answer 3

Dies ist eine Abhilfe mit Eingangsnummer, jQuery und SetTimeout:

<input type="number" name="test" inputmode="numeric" pattern="[0-9]*" step="1" class="only-numbers" /> 


$(document).on('keydown', '.only-numbers', function (e) { 
    var inputElement = $(this); 
    if (e.which < 48 || e.which > 57) { 
     window.setTimeout(function() { 
      inputElement.attr('type', 'text').attr('type', 'number'); 
     }, 100); 
    } 
}); 

Sie müssen möglicherweise die setTimeout Verzögerung anzupassen, wenn es nicht funktioniert.

Ich hoffe, es hilft jemandem, der das gleiche lästige Problem hat.