input automatisch leeren

Yamram · 23. April 2011

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 · 23. April 2011

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

$('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

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

Sarkkan · 23. April 2011

Eines meiner Skripte:

Code

/* * * * * * * * * * * * * * * * * * * * * *
 * 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;
            }
        }
    }
}

Alles anzeigen

und so wird das Script aufgerufen:

Code

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 :D)

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

Code

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

Yamram · 23. April 2011

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

Sarkkan · 23. April 2011

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

/* * * * * * * * * * * * * * * * * * * * * *
 * 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" />

Alles anzeigen

input automatisch leeren

Jetzt mitmachen!

Teilen