Formularpasswörter basierend auf JavaScript_Javascript-Kenntnissen ausblenden und anzeigen-js-Tutorial-php.cn

Formularpasswörter basierend auf JavaScript_Javascript-Kenntnissen ausblenden und anzeigen

WBOY

Freigeben： 2016-05-16 15:12:32

Original

1242 Leute haben es durchsucht

Aus Gründen der Sicherheit der Website stellen viele Freunde das Passwort komplexer ein, aber das Passwort kann nicht eindeutig angezeigt werden und ich weiß nicht, ob die Eingabe richtig oder falsch ist. Aus Sicherheitsgründen das Passwort kann angezeigt werden, also wie implementiert man es basierend auf js-Code? Was ist mit? Wenn der Benutzer eingibt, wird das Passwort als Punkt oder Sternchen angezeigt. Um sicherzustellen, dass die Benutzereingabe korrekt ist, kann der Benutzer zuerst auf die Schaltfläche klicken, um den Programmeffekt anzuzeigen

Schnittstellenstruktur, eine äußere Passbox, dann Eingabe und ein i-Tag zur inneren Ebene hinzufügen und entsprechende Klassennamen hinzufügen.

<div class="pass-box">
<input type="password" name="pass" />
<i state="off"></i>
</div>

Nach dem Login kopieren

Jetzt fügen wir die entsprechenden Attributwerte zur entsprechenden Klasse hinzu. In diesem Feld muss ich über der Eingabe liegen, also müssen wir i ein Positionsattribut geben und es dann oben und rechts anpassen und Höhe, Legen Sie das Hintergrundbild fest.

.pass-box {
width: 300px;
margin: 30px auto;
position: relative;
}
.pass-box input {
border: #cccccc 1px solid;
background-color: #fff;
color: #666;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
.pass-box i{
display: inline-block;
width: 30px;
height: 30px;
position: absolute;
right: 5px;
top:5px;
background-image: none;
background-size: 200% 200%;
background-position: center;
}

Nach dem Login kopieren

Auf diese Weise wird der Schnittstelleneffekt abgeschlossen. In der HTML-Struktur geben wir i einen Status an. Diese Funktion wird hauptsächlich verwendet, um den Effekt der beiden Klicks des Benutzers zu beurteilen , das Passwort wird angezeigt. Beim zweiten Mal wird das Passwort ausgeblendet. Verwenden Sie diesen Status, um seinen Status zu überprüfen

Der entscheidende Punkt besteht darin, das Typattribut der Eingabe zu ändern. Wenn es angezeigt wird, ist es ein Passwort, und wenn es ausgeblendet ist, ist die logische Verarbeitung von JS relativ klar.

var ele_pass_box = document.getElementsByTagName("div")[0];
var ele_pass = ele_pass_box.getElementsByTagName("input")[0];
var ele_eye = ele_pass_box.getElementsByTagName("i")[0];
ele_eye.onclick = function () {
var state = this.getAttribute("state");
if(state === "off") {
ele_pass.setAttribute("type", "text");
ele_eye.setAttribute("state", "on");
ele_eye.style.opacity = 0.2;
} else {
ele_pass.setAttribute("type", "password");
ele_eye.setAttribute("state", "off");
ele_eye.style.opacity = 1;
}
}

Nach dem Login kopieren

Dies ist der Logikcode, die Codemenge ist nicht groß. Achten Sie beim Testen nur auf die Details.

Das Obige ist der gesamte Inhalt, den der Herausgeber mit Ihnen geteilt hat, um Formularpasswörter basierend auf JavaScript auszublenden und anzuzeigen. Ich hoffe, dass er für alle hilfreich ist!