code - validate password html




Make Input Type="Passwort" Verwenden Sie das Nummernfeld auf mobilen Geräten (3)

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.

Irgendwelche Ideen?

Danke im Voraus!


Die einfachen Methoden wie "pattern" und "inputmode" funktionieren nicht in Android oder iOS, daher habe ich die folgende Problemumgehung mit CSS und JavaScript implementiert.

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:


Schließlich habe ich hier eine Antwort here :

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

(funktioniert nur in WebKit basierten Browsern)


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

Der HTML 5.1- Entwurf enthält das inputmode , das entwickelt wurde, um das spezifische Problem der Eingabemodus (wie Tastatur) Auswahl zu inputmode , aber es wurde noch nicht implementiert.

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

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






numbers