Make Input Type = "Passwort" Benutze Nummernblock auf mobilen Geräten

Auf meiner Website für mobile Geräte habe ich ein Eingabefeld, das für PIN-Nummern verwendet wird. Ich möchte, dass der Text bei der Eingabe ausgeblendet wird, und ich möchte, dass der Ziffernblock angezeigt wird, wenn der Benutzer auf dem Mobilgerät die PIN eingeben möchte. Der Ziffernblock erscheint, wenn Type = "Number", aber nicht Type = "Password" und ich kann (oder weiß nicht wie) Type = "Number and Password" einstellen.Make Input Type = "Passwort" Benutze Nummernblock auf mobilen Geräten

Irgendwelche Ideen?

Vielen Dank im Voraus!

Quelle

2013-10-01 JT Nolan

Möglicherweise müssen Sie das Kennwortfeld fälschen und Sternchen selbst in das Feld einfügen. – Brad

Einige Browser (iOS) erkennen den spezifischen pattern Attributwert von [0-9]* als auslösende numerische Tastatur.

Der HTML 5.1 Entwurf enthält das inputmode Attribut, das das spezifische Problem des Eingabemodus zu adressieren (wie Tastenfeld) Auswahl entwickelt wurde, aber es wurde noch nicht umgesetzt.

Sie könnten es für die Zukunft verwenden, obwohl - obwohl das aktuelle HTML 5.1 es für type=password aus irgendeinem seltsamen Grund nicht erlaubt.

<input type="password" pattern="[0-9]*" inputmode="numeric">

Quelle

2013-10-02 04:32:05

Ich habe dies auf iOS 8.2 versucht, und ich bekomme die normale alphabetische Tastatur. Funktioniert genau wie erwartet, wenn 'type =" text "'; Nur wenn ich es in 'type =" password "ändere, bekomme ich die alphabetische Tastatur. –

ja funktioniert nicht diese "Lösung" –

Mit Cordova, Building Target = Android das funktioniert nicht. Zeigt immer noch numerische Tastatur – Kentonbmax

Schließlich fand ich eine Antwort here:

input[type=number] { 
    -webkit-text-security: disc; 
}

(funktioniert nur in WebKit-basierten Browsern)

Quelle

2014-10-03 20:14:44

Das funktionierte für mich (Safari, iOS 9.3.2).Leider erscheinen die eingegebenen Zahlen im linken Feld des Auto-Suggest-Bereichs oben auf der Bildschirmtastatur, so dass sie immer noch auf dem Bildschirm sichtbar sind (obwohl sie innerhalb des eigentlichen Eingabefeldes maskiert sind). – GoBusto

Im Anschluss an meinen vorherigen Kommentar: Es scheint, dass die Änderung des Eingabefeldtyps von 'number' nach' tel' verhindert, dass im Auto-Suggest-Bereich etwas angezeigt wird. In Kombination mit '-webkit-text-security: disc;' wird sichergestellt, dass das Passwort überhaupt nicht auf dem Bildschirm angezeigt wird. – GoBusto

' ' – xinthose

oder Sie Ihre eigene Tastatur mit Javascript und CSS schaffen könnte, und wenn der Benutzer Geben Sie eine Zahl ein, bisplay * und speichern Sie den Wert in einer Javascript-Variablen. Just lik ich tat und es macht Benutzeranmeldung sehr glatt und einfach ... Mobile zuerst

Quelle

2015-08-04 23:40:10 Jayo2k

Die einfachen Möglichkeiten wie die Verwendung von "Muster" und "Eingabemodus" funktioniert nicht in Android noch IOS, so implementierte ich die untenstehende Problemumgehung mit CSS und JavaScript.

https://jsfiddle.net/tarikelmallah/1ou62xub/

HTML

<div> 
    <input type="password" class="form-control ng-valid-minlength ng-valid-pattern ng-dirty ng-valid ng-valid-required" id="pass" name="pass" data-ng-minlength="4" maxlength="4" tabindex="-1"> 
    <input type="tel" class="form-control ng-valid-minlength ng-dirty ng-valid ng-valid-required" id="passReal" name="passReal" required="" data-ng-minlength="4" maxlength="4" data-display-error-onblur="" data-number-mask="telephone" 
     tabindex="5"> 
</div>

JavaScript

$().ready(function(){ 
var xTriggered = 0; 
$("#passReal").keyup(function(event) { 
    $('#pass').val($('#passReal').val()); 
    console.log(event); 
}); 
$("#pass").focus(function() { 
    $('#passReal').focus(); 
}); 

    });

Stil:

input#passReal{ 
    width:1px; 
    height:10px; 
} 
input#pass { 
    position: absolute; 
left:0px; 
}

dieses Bild von Android-Emulator:

Quelle

2015-12-02 20:27:36

Make Input Type = "Passwort" Benutze Nummernblock auf mobilen Geräten

Antwort

Verwandte Themen