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

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Das neue Template Xobor (v6). � Passwort beim Login anzeigen!

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News. Stellen Sie Ihr eigene Webseite vor. Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? �rger mit dem PC, Laptop oder Tablet - Fragen & Antworten? Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten. XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! Das neue Template Xobor (v6). Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie. Wasserstoff - Energietr�ger der Zukunft. Die besten Links! Empfehlenswerte und interessante Links! Link - Suche. Verschiedenes Elektronik & Elektrotechnik - Fragen & Antworten Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones. Lob, Kritik & Verbesserungsvorschl�ge. Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit. Alles, was noch so �brig bleibt. Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel.

#1 | Passwort beim Login anzeigen! datum

17.04.2020 20:05 (zuletzt bearbeitet: 20.09.2020 14:15)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3594
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1464

Passwort beim Login anzeigen!
Aktualisiert 30.04.20

Die Idee, bei der Passworteingabe sich das Passwort anzeigen zu lassen, ist nicht neu!
Die Beschaffenheit der Passwörter, aber auch der Sicherheit wegen, werden Passwörter immer komplexer und länger!
Da sind Fehleingaben oder vergessene Passwörter an der Tagesordnung.
Von Vorteil ist es daher, hier nachzurüsten!

Die neuste Version vom Browser "MS Edge" stellt bereits die Funktion zur Verfügung, leider ohne Optionen.
Andere Browser werden bestimmt nachziehen!
Wie man im Bild sehen kann, ist das Symbol recht klein und schwarz. Auf Webseiten mit einem dunklen Design, wird das Auge kaum wahrgenommen!

Installation fürs Business-Template V4

Es gibt 3 Variationen, die durch ihre unterschiedlichen Funktionsweisen und Darstellungen vielen Ansprüchen gerecht werden!
Die Passwortanzeige wird aktiviert im "Login", in der "Anmeldung" und in der Portalbox "Userinfo"!
Als Auslösesymbol könnte man auch "Unicodes" verwenden, die allerdings nicht in allen Browsern funktionieren oder gleich aussehen!
In den folgenden Beispielen werden daher Grafiken benutzt, die auch beliebig angepasst werden können!

Unicodes:

👁 👁 ️ 👀 👀

Grafiken:

[img=50px]//files.homepagemodules.de/b104774/a_287_874cac01.png[/img]

[img=50px]//files.homepagemodules.de/b104774/a_289_997da877.png[/img]

Versionen:

Passwort anzeigen per "Mouseover"
Passwort ein- und ausblenden per "Klick"
Passwort ein- und ausblenden mittels "Checkbox"

Version 1: Passwort anzeigen per "Mouseover"!
Hat man sensible Daten und möchte das Passwort nur äußerst kurz anzeigen, ist die folgende Version per "Mouseover" optimal!
Nach einem Klick auf die Passwort-Eingabezeile, wird das Auslöse-Symbol ganz rechts angezeigt!
Nur beim "Mouseover" auf das Auslöse-Symbol wird das Passwort angezeigt!

Das komplette Skript mit der CSS kann in die "Fußzeile" oder am besten als Plugin in den "bottom_header" eingetragen werden!
Das Template wird nicht verändert!
In Zeile 4 kann die Größe der Grafik verändert werden. Gegebenenfalls "margin-top" anpassen!
Hat man eher ein dunkles Design, Zeile 10 freigeben (Doppelstrich entfernen) und Zeile 9 auskommentieren (Doppelstrich hinzufügen)!
Hier werden hellere Grafiken genommen, um den Kontrast zu gewährleisten!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<!-- 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>
 

Schließen

Version 2: Passwort ein- und ausblenden per "Klick"!
Möchte man das Passwort, um sich nicht zu verschreiben, während der gesamten Passworteingabe angezeigt bekommen, ist die folgende Version per "Klick" optimal!
Nach einem Klick auf die Passwort-Eingabezeile, wird das Auslöse-Symbol ganz rechts angezeigt!
Ein Klick auf das Auslöse-Symbol blendet das Passwort fest ein und wieder aus!

Das komplette Skript mit der CSS kann in die "Fußzeile" oder am besten als Plugin in den "bottom_header" eingetragen werden!
Das Template wird nicht verändert!
In Zeile 4 kann die Größe der Grafik verändert werden. Gegebenenfalls "margin-top" anpassen!
Hat man eher ein dunkles Design, Zeile 10 freigeben (Doppelstrich entfernen) und Zeile 9 auskommentieren (Doppelstrich hinzufügen)!
Hier werden hellere Grafiken genommen, um den Kontrast zu gewährleisten!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<!-- 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>
 

Schließen

Version 3: Passwort ein- und ausblenden per "Checkbox"!
Möchte man die neue Funktion besonders hervorheben, eignet sich die folgende Version per "Checkbox" besonders gut!
Die "Checkbox" wird immer angezeigt und bekommt einen kleinen Beschreibungswortlaut!
Das Passwort wird durch die "Checkbox" fest ein-und ausgeblendet!

Das komplette Skript mit der CSS kann in die "Fußzeile" oder am besten als Plugin in den "bottom_header" eingetragen werden!
Das Template wird nicht verändert!
Das Skript ist sehr klein und benötigt keine Grafiken!
Neu! Läuft jetzt auch im Portal!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<!-- 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>
 

Schließen

Wichtig und zu beachten!

Damit das Skript auch in der "Mobilen Version" oder im "Responsive-Design" funktioniert, muss das Skript auch unter "Mobil > Eigenes Javascript" eingetragen werden!
Beim Wechseln der Templates immer den Ordner Mobil überprüfen, ob die Eintragungen noch vorhanden sind!
Wird nur das "Responsive-Design" genutzt, sind die Eintragungen in der "Fußzeile" oder im "bottom_header" nicht mehr notwendig!

Soll das Feature auch mobil funktionieren, ist ein weiterer Eintrag unter Mobil notwendig!
Die Eintragungen entsprechen, mit kleinen Formatänderungen, dem Business Template V4!
Das folgende JavaScript kommt unter Mobil in Eigenes Javascript!
Die CSS wird unter Eigene Fußzeile eingetragen!

Das JavaScript wird unter Mobil in Eigenes Javascript eingetragen!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<!-- Passwort zeigen - Mit 'checkbox' / Für die mobile Version und die responsive Templates V6 -->
<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>
 

Schließen

Die CSS wird unter Eigene Fußzeile eingetragen!

1
2
3
4
5
 
<!-- Passwort zeigen - Mit 'checkbox' / Für die mobile Version und die responsive Templates V6 -->
<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>
 

Schließen

Hier sind alle 3 Versionen zum Ausprobieren: Passwort beim Login sichtbar machen!

Bis dann und gutes Gelingen

Wolfgang

Scannerxy und Mato finden das Top!

Antworten

#2 | Passwort beim Login anzeigen - Für alle Templates! datum

25.04.2020 15:31 (zuletzt bearbeitet: 20.09.2020 14:12)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3594
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1464

Passwort beim Login anzeigen - Für alle Templates!
Aktualisiert 20.09.20

Um das Passwort in allen Templates, auch im "Responsive-Design", beim Login oder beim Anmelden unkompliziert sichtbar zu machen, bietet sich das Skript per "Checkbox" bestens an!
Nimmt man eine andere Variante, "per Mouseover" oder "per Klick" müssen zu viele, individuelle Korrekturen in der Formatierung bedacht und angepasst werden!
Für das Gaia-Template V3 ist noch ein kleines Feature aktiv, das den Schnell-Login oben rechts ausblendet, wenn der große Login oder die Anmeldung aufgerufen wird!

Aus dem Support: Gaia Template (V3): Doppelte Passworteingabe ausblenden!

Installation für alle Template

Das komplette Skript mit der CSS kann in die "Fußzeile" oder am besten als Plugin in den "bottom_header" eingetragen werden!
Damit das Skript auch in der "Mobilen Version" funktioniert, Installation im folgenden Spoiler unter V 3.11 beachten!
Das Template wird dadurch nicht verändert!
Zeile 30 ist für die Ausblendung des "Schnell-Login" im Gaia zuständig ( Doppelte Passworteingabe ausblenden)!
Das Skript ist sehr klein und benötigt keine Grafiken!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!-- 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>
 

Schließen

Wird nur das "Responsive-Design" genutzt, sind die Eintragungen in der "Fußzeile" oder im "bottom_header" nicht mehr notwendig!
Die Eintragungen entsprechen, mit kleinen Formatänderungen, dem Business Template V4!
Das folgende JavaScript kommt unter Mobil in Eigenes Javascript!
Die CSS wird unter Eigene Fußzeile eingetragen!

Das JavaScript wird unter Mobil in Eigenes Javascript eingetragen!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<!-- Passwort zeigen - Mit 'checkbox' / Für die mobile Version und die responsive Templates V6 -->
<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>
 

Schließen

Die CSS wird unter Eigene Fußzeile eingetragen!

1
2
3
4
5
 
<!-- Passwort zeigen - Mit 'checkbox' / Für die mobile Version und die responsive Templates V6 -->
<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>
 

Schließen

Wichtig und zu beachten!

Damit das Skript auch in der "Mobilen Version" oder im "Responsive-Design" funktioniert, muss das Skript auch unter "Mobil > Eigenes Javascript" eingetragen werden!
Beim Wechseln der Templates immer den Ordner Mobil überprüfen, ob die Eintragungen noch vorhanden sind!
Wird nur das "Responsive-Design" genutzt, sind die Eintragungen in der "Fußzeile" oder im "bottom_header" nicht mehr notwendig!

Hier nochmal der Überblick der Varianten:

Hier sind alle 3 Versionen zum Ausprobieren: Passwort beim Login sichtbar machen!

PS: Es wäre natürlich gut, wenn Xobor das Plugin in den unterschiedlichen Templates fest übernehmen würde. Dann gäbe es keine Anpassungsschwierigkeiten oder Fehlfunktionen!

Info: Xobor Plugins erstellen, versenden und bearbeiten!

Bis dann und gutes Gelingen

Wolfgang

Scannerxy und Hans58 finden das Top!

Antworten

#3 | RE: Passwort beim Login anzeigen - Für alle Templates! datum

26.04.2020 10:35

Moin Wolfgang. D a s ist ja mal eine tolle Idee. Danke für deine Mühe und Arbeit!

Antworten

#4 | RE: Passwort beim Login anzeigen - Für alle Templates! datum

26.04.2020 19:26 (zuletzt bearbeitet: 26.04.2020 19:49)

wieder eine Super Idee von dir ... fantastisch

würde das auch auf der Portal Seite funktionieren?... ich hoffe ich habe nichts überlesen

denn bei mir funktioniert Variante 3 nicht im Portal

----------------

V 3.1 funktioniert super

Antworten

#5 | Fehlersuche: Passwort beim Login anzeigen! datum

27.04.2020 00:52

Fehlersuche: Passwort beim Login anzeigen!

Hallo Hans58,
habe den Fehler in Version 3 gefunden!
Läuft jetzt auch im Portal anstandslos!

Bis dann und danke fürs Feedback!
Wolfgang

Scannerxy und Hans58 finden das Top!

Antworten

#6 | Update: Passwort beim Login anzeigen! datum

03.05.2020 20:50

Update: Passwort beim Login anzeigen!

Es hat sich gezeigt, dass das Gaia Template V3 im Aufbau schon sehr speziell ist!
Habe die Beiträge nochmal überarbeiten müssen, um Formatfehler in den Gaia Error-Meldungen zu beheben und um das Zusammenspiel mit dem mobilen Template, einschließlich "Responsive-Design", besser zu verstehen!
Zusätzlich ist auch ein Update notwendig, damit der noch kommende Beitrag, Kennwort-Validierung mit "Passwort beim Login anzeigen" zusammenarbeiten!
Alle Änderungen sind bereits in Beitrag # 1 und Beitrag #2 vorgenommen!

Info: Xobor Plugins erstellen, versenden und bearbeiten!

Bis dann und seit gespannt
Wolfgang

Scannerxy findet das Top!

Antworten

Adventskalender neu bestückt! � � YouTube-Videogalerie für das eigene Forum installieren!

�hnliche Themen

Antworten

Letzter Beitrag

Login PopUp-Fenster
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von bienchen 6 11.04.2024 00:08
Wolfgang • Zugriffe: 666

Business-Template V4: Login-Box im Portal ausblenden!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

22.08.2020 12:12
von

Wolfgang • Zugriffe: 752

Alben der Bildergalerie zugeklappt anzeigen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 0 28.05.2020 20:56
Wolfgang • Zugriffe: 811

Passwortstärke einstellen und Berechtigung Benutzernamen erweitern!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

08.05.2020 20:02
von

Wolfgang • Zugriffe: 1013

Login-Leiste im Gaia und Portal-Box "Userinfo" modifizieren - Teil 1+2!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

12.01.2020 23:12
von

Wolfgang • Zugriffe: 2952

Geheime Sache - Kategorien mit Passwort schützen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

09.05.2018 21:19
von

Wolfgang • Zugriffe: 800

Sound beim Einloggen ins Forum
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 3 16.02.2015 23:11
Wolfgang • Zugriffe: 2659

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

65%

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

Passwort beim Login anzeigen!Aktualisiert 30.04.20

Passwort beim Login anzeigen - Für alle Templates!Aktualisiert 20.09.20

Fehlersuche: Passwort beim Login anzeigen!

Update: Passwort beim Login anzeigen!

Passwort beim Login anzeigen!
Aktualisiert 30.04.20

Passwort beim Login anzeigen - Für alle Templates!
Aktualisiert 20.09.20