jQuery(document)


aceaccis

Grünschnabel
#1
Hallo zusammen,

aktuell versuche ich mich an einer Sache da beiße ich mir alle Zähne aus.

Ziel ist mit Hilfe eines js ein Label mit type="password" in type="text" zu ändern was auch gut klappt.
Genauer gesagt es soll bei einem Password Eingabefeld die Sternchen in Plain Text gewandelt werden und zurück.

Das *.tpl in welches das js eingefügt wird ist Mehrsprachig und arbeitet mit $LANG strings.

Jetzt versuche ich über jQuery diese {$Lang.text} in das script zu überführen, ich habe eine bsp. Datei beiße mir aber voll die Zähne aus.

Das Form sieht so aus :
HTML:
<input type="password" name="password2" id="inputNewPassword2" class="field" placeholder="{$LANG.clientareaconfirmpassword}" autocomplete="off"{if $remote_auth_prelinked} value="{$password}"{/if}>
                        <i class="fa fa-eye btn btn-small"><button class="smooth" type="button" id="check"> {$LANG.passwdsee}</button></i>
Der Sprach String :
Code:
$_LANG['passwdsee'] = "Password anzeigen";
$_LANG['passwdhide'] = "Password verstecken";
Der Inline Code im *.tpl :
Javascript:
<script type="text/javascript" src="{$BASE_PATH_JS}/passwd.js"></script>
<script>
    window.passwdsee = "{$LANG.passwdsee}";
    window.passwdhide = "{$LANG.passwdhide}";
    jQuery(document).ready(function()
    {
        jQuery("#inputNewPassword1").keyup(Password1);
    });
</script>
Nun möchte ich mit jQuery die variable an das script übergeben :
Javascript:
jQuery(document).ready(function(){
    if(typeof window.passwdsee === 'undefined'){
        window.passwdsee = "Show Password";
    }
    if(typeof window.passwdhide === 'undefined'){
        window.passwdhide = "Hide Password";
    }
Das Script zum anzeigen und verstecken lautet:
Javascript:
'use strict';
document.addEventListener('DOMContentLoaded', function () {
    document.querySelector('#check')
        .addEventListener('click', function () {
            if (document.getElementById('inputNewPassword1')
                .type == 'password') {
                document.getElementById('inputNewPassword1')
                    .type = 'text';
                this.textLabel = 'Password verstecken';
            } else {
                document.getElementById('inputNewPassword1')
                    .type = 'password';
                this.textLabel = 'Password anzeigen';
            }
        });
});
Jetzt muss ich nur noch die var an this.textLabel = 'Password verstecken'; anpassen.

Hoffe ich habe mich verständlich ausgedrückt ? o_O

Danke und Gruß
Chris
 

Quaese

Moderator
Moderator
#4
Hi,

die ID des Inputs lautet inputNewPassword2, im Code wird aber inputNewPassword1 verwendet.

Ansonsten wäre ein zusammenhängendes funktionierendes HTML-Fragment zum Nachstellen und Testen einfacher für die Analyse.

Ciao
Quaese