js imitiert Alipay, um den Effekt des Zahlungspassworts auszufüllen und so Javascript-Kenntnisse für die Eingabe von Multi-Box-Passwörtern zu erlangen

Ich weiß nicht, wie ich den Titel beschreiben soll. Schauen wir uns zuerst den Screenshot an. Der allgemeine Effekt besteht darin, ein Passwort in ein Feld einzugeben.

Die erste Implementierungsidee ist, dass ein kleines Feld eine Eingabe vom Typ Passwort ist. Bei jeder Eingabe einer Ziffer wird automatisch zur nächsten Ziffer gesprungen Unter Android ist es in Ordnung. Es läuft flüssig und weist keine Fehler auf, aber unter iOS wird die Tastatur häufig geöffnet und geschlossen, was sich stark auf das Benutzererlebnis auswirkt. Der Grund dafür ist wahrscheinlich, dass jede Eingabe kontinuierlich fokussiert und unscharf wird. Bei jedem Fokus wird die Tastatur angezeigt und bei Unschärfe wird die Tastatur geschlossen, also ... wird diese Lösung definitiv nicht funktionieren.

PM muss diesen Effekt erzielen, es gibt keine Möglichkeit~ Aber wenn Sie nichts dagegen tun können, wird Ihnen eine schlechte Benutzererfahrung die Sprache verschlagen. Wer möchte, dass wir das Frontend sind~ Wenn Sie nichts dagegen tun können , finde einfach eine Lösung.

Da viele der Probleme durch häufiges Fokussieren und Unschärfe verursacht werden und es sich um ein Passwortfeld handeln muss, warum nicht ein Eingabefeld zur Eingabe verwenden und andere Methoden verwenden, um das kleine Feld zu simulieren, und los geht's.

Das Folgende ist der implementierte Stil:

.pwd-box{
width:310px;
padding-left: 1px;
position: relative;
border: 1px solid #9f9fa0;
border-radius: 3px;
}
.pwd-box input[type="tel"]{
width: 99%;
height: 45px;
color: transparent;
position: absolute;
top: 0;
left: 0;
border: none;
font-size: 18px;
opacity: 0;
z-index: 1;
letter-spacing: 35px;
}
.fake-box input{
width: 44px;
height: 48px;
border: none;
border-right: 1px solid #e5e5e5;
text-align: center;
font-size: 30px;
}
.fake-box input:nth-last-child(1){
border:none;
}

.pwd-box .pwd-input:focus{//密码框聚焦的时候需要改变其位置，否则IOS上会有闪动的光标~
left:-1000px;
top: -100px;
}

var $input = $(".fake-box input");
      $("#pwd-input").on("input", function() {
        var pwd = $(this).val().trim();
        for (var i = 0, len = pwd.length; i < len; i++) {
          $input.eq("" + i + "").val(pwd[i]);
        }
        $input.each(function() {
          var index = $(this).index();
          if (index >= len) {
            $(this).val("");
          }
        });
        if (len == 6) {
          self.sendPackage(pwd);//发送密码
        }
      });

Die allgemeine Idee besteht darin, die Eingabe des echten Passwortfelds dynamisch zu überwachen und den Inhalt des Passwortfelds im kleinen Feld zu ändern.

Tatsächlich ist es nicht schwierig, das Kompatibilitätsproblem zu lösen. Wenn der Effekt abgeschlossen ist, wird bei Android eine Reihe von Methoden angezeigt Verstecken Sie den Cursor, z. B. beim Festlegen von Text, Einzug, Farbeinstellungen, Transparenz usw., aber alles ohne Erfolg. Später fand ich heraus, dass Taobao eine Möglichkeit hat, das Passwortfeld beim Fokussieren beiseite zu legen, weil die äußere Ebene Der Überlauf ist ausgeblendet, was das Problem perfekt löst.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der Javascript-Programmierung hilfreich sein wird.