Moin,
hier ein kleines How To wie man eine Meldung auswerfen kann wenn bei einem Password - Feld während der Eingabe die Hochstelltaste (Caps Lock) aktiviert ist.
Wie sieht das ganze aus ?
So:
Das Bsp. zeige ich Anhand vom Standard template "Six" eventuell müsst Ihr das ganze noch an euer Template anpassen !!
Ich verwende hier auch css/Js incoding , da es einfacher ist in der Darstellung.
Für künftige Leser Mittlerweile dürfte auch ein Lexicon Eintrag von mir erstellt worden sein wie man CSS / Js optimiert einsetzt.
So nun zum Script :
Bitte fügt in der login.tpl Zeile 27 folgenden code ein:
<label id="capsLockWarning" style="font-weight: bold; color: maroon; position: absolute; width: 94%; text-align: right; margin: -26px 0px 0px -10px; display: none;" ><i class="fas fa-arrow-up"></i> Caps Lock is on !!</label>genauer gesagt abweichend von dem Six Template unterhalb von :
<input type="password" name="password" class="form-control" id="inputPassword" placeholder="{$LANG.clientareapassword}" autocomplete="off" >
Nach dem schließenden Div </div> kommt bitte in {literal} gesetzt das Java Script:
{literal}
<script>
function isCapsLockOn(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
var shiftKey = e.shiftKey ? e.shiftKey : ((keyCode == 16) ? true : false);
return (((keyCode >= 65 && keyCode <= 90) && !shiftKey) || ((keyCode >= 97 && keyCode <= 122) && shiftKey))
}
function showCapsLockMsg(e) {
var warningElement = document.getElementById('capsLockWarning');
if (isCapsLockOn(e))
warningElement.style.display = 'block';
else
warningElement.style.display = 'none';
}
document.onkeypress = function (e) {
e = e || window.event;
showCapsLockMsg(e);
}
</script>
{/literal}Lit.... was ?
Wenn Ihr Java-Skript auf Websites installieren, die die Smarty Template Engine verwenden, z.B. WHMCS, müsst Ihr sicherstellen, dass der eingefügte Code in {literale} Tags eingeschlossen ist. Andernfalls wird die gerenderte Seite "unterbrochen" und Inhalte im Kopfbereich der Website fehlen wie Stylesheets, JavaScript und andere Ressourcen.
Das war es dann auch schon .
Ihr könnt natürlich für den Text auch folgendes Bsp. nehmen:
{$LANG.login_caps_message} --> Um das ganze multi language fähig zu machen.
oder eine Grafik einfügen und diese über einen string {$LANG.login_caps_message_img}
auch mit einem Text versehen multi language fähig machen.
Einfach mal etwas spielen .
P.S. Die Images könnt Ihr gerne verwenden.
Gruß Christian