Hi Community.
Ich brauchte es gerade und teile es nun hier. Habe ein kurzes Javascript zusammengeschrieben um einen Button zur Sichtbarmachung der Zeichen bei der Passworteingabe zu generieren.
Mit dem hier geposteten Code nur für Templates die FontAwesome benutzen geeignet.
Im Standard-Template
tpl_modified_responsive in
/templates/tpl_modified_responsive/javascript/extra/default.js.php ganz unten diesen Code einfügen:
<?php
//BOC "show pass" implementation, 05-2021, noRiddle
?>
<script>
$(function() {
if($('input[type="password"]').length) {
let $ipw = $('input[type="password"]'),
sh_pw = ' <i class="shw-pw fa fa-eye"></i>';
$ipw.each(function() {
let $this = $(this),
th = $this.outerHeight(),
icfs = 22,
nth = th/2 - icfs/2;
$this.wrap('<div class="pssw-wrap" style="position:relative;"></div>');
$(sh_pw).insertAfter($this).css({'position':'absolute', 'top':nth+'px', 'right':'5px', 'font-size':icfs+'px', 'color':'#555', 'cursor':'pointer'});
});
$('.shw-pw').on('click', function() {
let $that = $(this);
$tpi = $that.prev('input'),
tpiattp = $tpi.attr('type'),
tswp = tpiattp == 'password' ? true : false;
$tpi.prop('type', (tswp ? 'text' : 'password'));
$that.toggleClass('fa-eye', !tswp).toggleClass('fa-eye-slash', tswp);
});
}
});
</script>
<?php
//EOC "show pass" implementation, 05-2021, noRiddle
?>
In
/templates/YOUR_TEMPLATE/stylesheet.css diesen Code anlegen:
/*BOC "show pass" icon in passw fields, 05-2021, noRiddle*/
#create_account .pssw-wrap {
display:inline-block;
width:95%;
}
#create_account .pssw-wrap input {
width:100%;
}
/*EOC "show pass" icon in passw fields, 05-2021, noRiddle*/
Für andere Templates bitte selbst schauen wo es am besten eingefügt wird.
Der Code erkennt wenn auf der aufgerufenen Seite ein Passwort-Feld vorhanden ist und generiert einen Container der das Passwort-Feld mit
position:relative umgibt, um den Button dann absolute positioniert ins Passwort-Feld einfügen zu können. Die Styles sind inline generiert da für die Positionierung des Buttons die Höhe des Input-Feldes automat. berechnet wird. Die font-size des Buttons ist konfigurierbar bei
icfs.
Wer will kann den Teil der nicht autom. berechnet werden muß natürlich in CSS ausgliedern.
Wie ich's hier gepostet habe hat man allerdings komprimiert mit knappen drei Zeilen Code eine schöne und leicht zu implementierende Funktion.
[ Für Gäste sind keine Dateianhänge sichtbar ] [ Für Gäste sind keine Dateianhänge sichtbar ]
Gruß,
noRiddle
[
EDIT Tomcraft 01.10.2021: Code
korrigiert.]
[
EDIT Tomcraft 01.10.2021: Fehler
korrigiert.]
[
EDIT Tomcraft 01.10.2021: Code
aktualisiert.]
Linkback: https://www.modified-shop.org/forum/index.php?topic=41861.0