Für den Login meines neuen Portals wollte ich 2 Formularfelder erstellen, die ihren Verwendungszweck nicht durch ein Label offenbaren, sondern durch Vorgabewerte in den Feldern selbst. Nach dem anklicken der Felder sollten diese Vorgabewerte verschwinden und der Besucher kann Username und Passwort eintragen. Für das Feld „Username“ soweit auch kein Problem, allerdings macht ein Vorgabewert in einem Feld vom Type „password“ wenig Sinn, da nur Sternchen bzw. Punkte angezeigt werden.

Da es keine verlässliche Methode gibt um den Type eines Inputfeldes von „password“ auf „text“ cross-browser-kompatibel zu verändern, muss man sich mit einem kleinen Trick helfen. Dieser besteht in der Erzeugung eines zusätzlichen Fake-Passwortfeldes vom Type „text“. Dieses wird beim Aufruf der Seite angezeigt und beim Verlassen (blur) des Passwortfeldes, wenn kein Eintrag vorgenommen wurde. Während dieses Fake-Passwortfeld angezeigt wird ist das richtige Passwortfeld ausgeblendet und man kann seinen Vorgabewert problemlos ausgeben. Sobald der Besucher das Fake-Passwortfeld angeklickt um sein Passwort einzugeben, verschwindet das Fake-Feld das richtige Passwortfeld wird eingeblendet und der Cursor per .focus() dorthin verschoben.

Und so sieht das Ganze letztendlich aus:

<form>
    <input type="text" name="username" id="username" class="inputbox" title="Benutzername" value="Username"/>
    <input style="display: none" class="default" type="text" name="fakepassword" id="fakepassword" value="Password" />
    <input type="password" name="password" id="password" class="inputbox" title="Passwort" value="" />
</form>

$(document).ready(function() {
    // fill login fields with standard value
    $('#username').toggleValue('Username');
    $('#password').hide();
    $('#fakepassword').show();

    $('#password').blur(function () {
        if ($.trim($('#password').val()) == '') {
            $('#password').hide();
            $('#fakepassword').show();
        }
    });

    $('#fakepassword').focus(function () {
        $('#fakepassword').hide();
        $('#password').show();
        $('#password').focus();
    });
});

Die jQuery Erweiterung „toggleValue“ hab ich schon vor einiger Zeit mal aus dem Netz gezogen, daher hab ich leider die genau Quelle nicht mehr. Bei Supertopic gibt es einen entsprechenden Beitrag. Daher könnte es sein. Ich habe die Erweiterung noch um eine „default“ Klasse ergänzt die mit dem Defaultwert jeweils hinzugefügt bzw. entfernt wird

$.fn.toggleValue = function(defaultText) {
    return this.each(function() {

        $(this).addClass('default');

        $(this).focus(function() {
            if ($(this).val() == defaultText) {
                $(this).val('').removeClass('default');
                        }
                        $(this).blur(function () {
                if ($.trim($(this).val()) == '') {
                    $(this).val(defaultText).addClass('default');
                                }
                        });
                });
        });
};