Tutorial HTML, CSS u. PHP - Forum

[philipp e.]

Hallöchen,
wie kann man eigentlich ein input feld beim anklicken (wie :focus) automatisch leeren?
Also zum Beispiel:
|--------------------------------|
| Nickname |
|--------------------------------|

und dann nachdem anklicken
|--------------------------------|
| | |
|--------------------------------|

Hmmm ich glaub die Zeichnung war unnötig.


Mit freundlichen Grüßen,
Philipp Escher

[Sören]

Indem du das Attribut value des inputs änderst.

Ich weiß jetzt gerade nur, wie es mit jQuery funktioniert, es geht aber bestimmt auch ohne:

Code: Alles auswählen

$('input').focus( function() {
    $(this).val('');
});

Das Problem ist jetzt natürlich, dass es immer geleert wird, auch, wenn dort Eingaben vom Benutzer drinstehen.
Das könnte man mit einer if-Abfrage vermeiden:

Code: Alles auswählen

$('input').focus( function() {
    if ($(this).val() == 'Nickname') {
        $(this).val('');
    }
});

[Sarkkan]

Eines meiner Skripte:

Code: Alles auswählen

/* * * * * * * * * * * * * * * * * * * * * *
* Platzhalter-Feature
*      basierend auf dem HTMl5-placeholder-attribute
*
* Leert alle Browser, die kein placeholder kennen, sich Ähnlich zu verhalten.
*
* @author: Dustin Breuer <breuer@lemm.de>
*
* @var where = Element
* @var placeholder = Wert der als Platzhalter gesetzt werden soll
* @var phColor = Farbe der Platzhaltercschrift
* @var fontColor = Eigentliche Schriftfarbe
*
*
* * * * * * * * * * * * * * * * * * * * */

function placeholder(where, placeholder, phColor, fontColor){
    if(where.value == ""){
        with(where){
            value = placeholder;
            style.fontStyle = "italic";
            style.color = phColor;
        }
    }
    where.onfocus = function(){
        if(where.value == placeholder){
            with(where){
                value = "";
                style.fontStyle = "normal";
                style.color: fontColor
            }
        }
    }
    where.onblur = function(){
        if(where.value == ""){
            with(where){
                value = placeholder;
                style.fontStyle = "italic";
                style.color: phColor;
            }
        }
    }
}

und so wird das Script aufgerufen:

Code: Alles auswählen

if(!("placeholder" in document.createElement("input"))){
    placeholder(document.getElementById("myElement"), document.getElementById("myElement").getAttribute("placeholder"), "#555", "#333");
}

(Ich hoffe es klappt, habe das aus meiner jQuery-Erweiterung umgeschrieben und noch nicht getestet )

Normalerweise nutze ich diese Erweiterung um die placeholder-Funktion für den IE zu faken:

Code: Alles auswählen

<input type="text" name="blabla" placeholder="Ihr Name" />

[philipp e.]

Das geht nicht
wie kann ich denn ein Element mit seinem Tag erreichen
getElementByTag oder nicht?

[Sarkkan]

Was genau geht nicht?

mit document.getElementsByTagName(Tagname) bekommst du ein Array mit allen Elementen namens Tagname zurück^^

Edit: Übrigens funktionierte oberer Code nicht, aber dieser hier:

Code: Alles auswählen

/* * * * * * * * * * * * * * * * * * * * * *
* Platzhalter-Feature
*      basierend auf dem HTMl5-placeholder-attribute
*
* Leert alle Browser, die kein placeholder kennen, sich Ähnlich zu verhalten.
*
* @author: Dustin Breuer <breuer@lemm.de>
*
* @var where = Element
* @var placeholder = Wert der als Platzhalter gesetzt werden soll
* @var phColor = Farbe der Platzhaltercschrift
* @var fontColor = Eigentliche Schriftfarbe
*
*
* * * * * * * * * * * * * * * * * * * * */
function placeholder(where, placeholder, phColor, fontColor){

    if(where.value == ""){
        where.value = placeholder;
        where.style.fontStyle = "italic";
        where.style.color = phColor;
    }
    where.onfocus = function(){
        if(where.value == placeholder){
            where.value = "";
            where.style.fontStyle = "normal";
            where.style.color = fontColor
        }
    }
    where.onblur = function(){
        if(where.value == ""){
            where.value = placeholder;
            where.style.fontStyle = "italic";
            where.style.color = phColor;
        }
    }
}
window.onload = function(){

    placeholder(document.getElementById("myElement"), document.getElementById("myElement").getAttribute("pla"), "#555", "#333");

}



///////////////////

<input type="text" pla="asb" id="myElement" />