So fügen Sie ein Kontrollkästchen in ein Eingabefeld für das Passwort ein

Question

Ich möchte, dass meine Webseite ein Kontrollkästchen im Passwortfeld anzeigt. Der Benutzer klickt auf das Kontrollkästchen und sieht das Passwort als Text. Wenn Sie das Kontrollkästchen deaktivieren, wird das Passwort erneut angezeigt.

Das ist was ich will. Dies ist von der Ebay Website Login-Seite.

Dies ist, was ich

Ich möchte diese Checkbox innerhalb des Passwort-Feld immer bin. Ich konnte nichts online zu diesem Thema finden.

Hier ist mein Code:

<!-- Set a password for the account --> 
<div class="col-md-12" style="margin: 7px;"> 
    <input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" /> 
</div> 
<input type="checkbox" id="eye" onclick="if(reg_password.type=='text')reg_password.type='password'; else reg_password.type='text';" /> 

Answer 1

einfach CSS hinzufügen und Ihre Kontrollkästchen, um eine Gruppe div mit Eingabetext bewegen. Siehe Beispiel

#eye { 
    position:absolute; 
    right:50px; 
    top:6px; 
} 

Click Here

Answer 2

Dies würde die Lösung sein.

.text-container { 
 
    display: inline-block; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.btn { 
 
    position: absolute; 
 
    top: 10px; 
 
    right: 10px; 
 
}

<div class="col-md-12 text-container" style="margin: 7px;"> 
 
    <input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" /> 
 
    <span id="btn" class="btn"><input type="checkbox" id="eye" onclick="if(reg_password.type=='text')reg_password.type='password'; else reg_password.type='text';" /></span> 
 
</div>

Answer 3

input#eye { 
 
    position: absolute; 
 
    right: 10px; 
 
    top: 10px; 
 
} 
 
#reg_password.form-control.input-lg { 
 
    position: relative; 
 
} 
 
.parent{position:absolute;}

<!-- Set a password for the account --> 
 
<div class="col-md-12 parent" style="margin: 7px;"> 
 
    <input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" /> <input type="checkbox" id="eye" onclick="if(reg_password.type=='text')reg_password.type='password'; else reg_password.type='text';" /> 
 
</div>

Answer 4

.text-container { 
    display: inline-block; 
    position: relative; 
    overflow: hidden; 
} 
.btn { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    transition: right 0.2s; 
} 

<div class="col-md-12 text-container" style="margin: 7px;"> 
    <input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" /> 
    <span id="btn" class="btn"><input type="checkbox" id="password" /></span> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() { 
$("#password").click(function() { 
if ($("#reg_password").attr("type")=="password") { 
$("#reg_password").attr("type", "text"); 
} 
else{ 
$("#reg_password").attr("type", "password"); 
} 

}); 
}); 
</script>