Javascript-Code: Ich möchte das Textfeld leer sein, wenn im Fokus

Question

Ich möchte den Text verschwinden, wenn der Benutzername Feld angeklickt wird, mache ich es richtig mit onfocus? Was mache ich falsch, bitte helfen.

document.getElementById("username").onfocus = function() { 
 
    document.getElementById("username").value = ""; 
 
}

<form name="Sign Up"> 
 
    <fieldset> 
 
    <legend><i><b>Siqn Up</b></i> 
 
    </legend> 
 
    <p> 
 
     <label for="username">Username</label> 
 
     <input type="text" value="Unique ID" name="username"> 
 
    </p> 
 
    <p> 
 
     <label for="email">Email</label> 
 
     <input type="text" name="email"> 
 
    </p> 
 
    <p> 
 
     <label for="password">Password 
 
     <input type="password" name="password"> 
 
     </label> 
 
    </p> 
 
    <input type="submit" value="Sign Up"> 
 
    </fieldset> 
 
</form>

Answer 1

Das Textfeld hat nur eine name von "username". Sie müssen es auch ein id Attribut geben.

<input type="text" value="Unique ID" name="username" id="username"> 

Beachten Sie, wie die JavaScript-Funktion getElementBy Id genannt wird? :) Das bedeutet, es braucht eine ID!

Answer 2

Anstatt die value direkt (Art von Hacky und anfällig für Komplikationen) zu ändern, verwenden Sie das placeholder Attribut. Es ist genau dafür gemacht - kein Javascript erforderlich.

<input type="text" name="username" placeholder="Unique ID">

Answer 3

Sie getElementById verwenden und "name" Attribut als Argument übergeben, die nie gefunden werden, so verwenden getElementsByName:

document.getElementsByName("username")[0].onfocus=function() 
document.getElementsByName("username")[0].value = "";