Hallo!
erst einmal rate ich dir, dir das placeholder-Attribut ansehen. Das ist eine HTML5-Lösung dafür, was du mit JavaScript gebaut hast.
<input type="text" placeholder="Vorname">
Funktioniert in allen neueren Browsern, im IE erst ab Version 10.
Zweitens rate ich dazu, wiederverwendbare Funktionen zu schreiben. Deine beiden Felder funktioniert anscheinend identisch, also wäre es sinnvoller, ein Set an flexiblen Funktionen zu schreiben, anstatt den JavaScript-Code zu verdoppeln.
Zum window.onload-Problem empfehle ich die Lektüre von
Fortgeschrittene Ereignisverarbeitung und Onload-Techniken.
window.onload kann nur einen Event-Handler beinhalten, aber darin kannst du weitere Funktionen ausführen:
window.onload = function () {
initialisiereVorname();
initialisiereNachname();
// usw.
};
function initialisiereVorname () {
// Registriere Event-Handler usw.
}
function initialisiereNachname () {
// Registriere Event-Handler usw.
}
Besser wäre es, hier addEventListener und DOMContentLoaded zu verwenden oder das Script einfach ans Ende des Dokuments zu stellen.
// Vorname //
window.onload = function () {
var elem = document.getElementById('Vorname')
elem.value = 'Vorname';
elem.style.color = "grey";
elem.style.fontSize = "25";
elem.style.padding = "10 10 10 10";
elem.style.backgroundColor = "#7AABBC"
elem.style.border = "solid"
elem.style.borderColor = "#4F90AF"
Wenn sich diese Styles ohnehin nicht ändern, so kannst du sie viel einfacher in einem Stylesheet setzen.
#Vorname {
font-size: 25px;
/* usw. */
}
Falls du die JavaScript-Variante wählst, du solltest du auf jeden Fall den Zahlenwerten eine Einheit mitgeben, sonst ignorieren standardkonforme Browser die Zuweisung:
elem.style.fontSize = "25px";
elem.style.padding = "10px";
function resetClickV(element) {
if(element.value == "Vorname") {
element.value = "";}
}
Wenn du den Standardwert im HTML notierst ([code lang=html]<input type="text" name="Vorname" value="Vorname">), so hast du Zugriff auf die JavaScript-Eigenschaft http://de.selfhtml.org/javascript/objekte/elements.htm#default_value@title=defaultValue. Das heißt, du musst den String "Vorname" nicht in deinem JavaScript hartkodieren. Das macht die Funktion wiederverwendbar für verschiedene Felder.
function resetClickUpV(element){
if(element.value == "") {
document.getElementById ('Vorname').type='text;'
element.value = "Vorname";
element.style.color = "grey";
}
}
Du hast hier die Variable element, die auf das Vornamenfeld zeigt, es besteht also kein Grund, noch einmal getElementById aufzurufen. Du kannst einfach element.type benutzen.
Grüße,
Mathias