JavaScriptコード：フォーカス時にテキストボックスを空にしたい

Question

ユーザ名ボックスをクリックするとテキストが消えてしまいますが、私はonfocusで正しくやっていますか？私は間違って何をしています、助けてください。

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

テキストボックスにのみ"username"のnameを持っています。それにもid属性を付ける必要があります。 JavaScriptの関数はgetElementBy 同上と呼ばれる方法を

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

お知らせ？ :)つまり、それはIDが必要です！

Answer 2

valueを直接的に変更するのではなく（ハックの種類や問題が発生しやすい）、placeholder属性を使用します。それはまさにこれを行うために作られました - javascriptは必要ありません。あなたはgetElementsByName getElementByIdをを使用して、見つかったことはありません引数として "name" 属性を渡し、その使用されている

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

Answer 3

：

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