Forum - Das neue Template Xobor (v6) » Passwort beim Login anzeigen!

<!-- Passwort zeigen - Per 'Mouseover' / Business-Template -->
<style>
.myPass {display:none;position:absolute;right:-10px;cursor:pointer;}
.myPass img {width:25px;margin-top:-2px;}
</style>
 
<script>
var passw = $("#login_password, #register_password_input");
passw.before('<div class="myPass"><img src="//files.homepagemodules.de/b104774/a_290_67b81bd0.png" style="display:none;"><img src="//files.homepagemodules.de/b104774/a_289_997da877.png"></div>');
//passw.before('<div class="myPass"><img src="//files.homepagemodules.de/b104774/a_287_874cac01.png" style="display:none;"><img src="//files.homepagemodules.de/b104774/a_288_f9f2385e.png"></div>');
 
var pass = $('.myPass');
passw.click(function(){pass.show(100);});
passw.focusout(function(){pass.delay(500).hide(100);});
 
var passimg = $(".myPass img");
passimg.mouseover(function(){
if (passw.is(":password")){
passw.prop("type", "text");
passimg.toggle();
};
});
 
passimg.mouseout(function(){
passw.prop("type", "password");
passimg.toggle();
});
</script>
 

<!-- Passwort zeigen - Per 'Klick' / Business-Template -->
<style>
.myPass {display:none;position:absolute;right:-10px;cursor:pointer;}
.myPass img {width:25px;margin-top:-2px;}
</style>
 
<script>
var passw = $("#login_password, #register_password_input");
passw.before('<div class="myPass"><img src="//files.homepagemodules.de/b104774/a_290_67b81bd0.png" style="display:none;"><img src="//files.homepagemodules.de/b104774/a_289_997da877.png"></div>');
//passw.before('<div class="myPass"><img src="//files.homepagemodules.de/b104774/a_287_874cac01.png" style="display:none;"><img src="//files.homepagemodules.de/b104774/a_288_f9f2385e.png"></div>');
 
var pass = $('.myPass');
passw.click(function(){pass.show(0);})
passw.focusout(function(){pass.delay(1000).hide(1);})
 
var passimg = $(".myPass img")
passimg.click(function(){
if (passw.is(":password")){
passw.prop("type", "text");
passimg.toggle();
} else {
passw.prop("type", "password");
passimg.toggle();
}
});
</script>
 

<!-- Passwort zeigen - Mit 'checkbox' / Business-Template -->
<style>
.myPass span{white-space:nowrap;line-height:30px;font-size:12px;}
.myPass input{width:30px !important;box-shadow:none;cursor:pointer;position:relative;top:2px;}
</style>
 
<script>
$(function(){
var passw = $("input[name='pww'],input[name='puw']");
passw.parent().append('<div class="myPass"><input type="checkbox"><span>Passwort anzeigen</span></div>');
 
$(".myPass input").click(function(){
if (passw.is(":password")){
passw.prop("type", "text");
} else {
passw.prop("type", "password");
};
});
});
</script>
 

<!-- Passwort zeigen - Mit 'checkbox' / Nur für  Templates V1 - V4 -->
<style>
.myPass span {white-space:nowrap;line-height:30px;font-size:12px;}
.myPass input {width:30px !important;box-shadow:none;cursor:pointer;position:relative;top:2px;}
 
/* Gaia */
.login .myPass {text-align:right;font-size:10px;right:90px;}
.login .myPass span {font-size:10px;}
.login div {padding-top:10px;}
 
/* Pro Silver */
.ltr .myPass input {top:0px;}
</style>
 
<script>
$(function(){
var passw = $("input[name='pww'],input[name='puw']");
passw.parent().append('<div class="myPass"><input type="checkbox"><span>Passwort anzeigen</span></div>');
 
$(".myPass input").click(function(){
if (passw.is(":password")){
passw.prop("type", "text");
} else {
passw.prop("type", "password");
};
});
});
 
// Gaia - Schnell-Login
if($("#login_form,#captcha").length){$("#foben_login_form .login div").hide();}
</script>