Question

I want to clear the text in textfield, for example if you go to the
gmail account signup
You can see that text will cleared after you start typing,
so simple

document.getElementById("FirstName").value = ""; won’t work, word First still going to be over there.

So how to clear it?
Thank you.

Answer 1

Take a closer look at the HTML. The string First isn’t a value of the text box but a SPAN that is placed over it via CSS.

<label id="firstname-label" class="firstname">
  <strong>First name</strong>
  <input id="FirstName" type="text" spellcheck="false" name="FirstName" value="" n="1">
  <span id="firstname-placeholder" class="placeholder-text" style="display: block;">First</span>
</label>

The technique is sometimes called a watermark.

As for how to change the value and hide the SPAN

As soon as the input has a value (it looks like it is bound on the keyUp event) this inline style is added to the span display: none;. If you wanted to programmatically set input#FirstName and clear the span you would need to either programmatically fire the event that is triggering the hiding or also programmatically hide the span (it looks like each input that has a placeholder value uses the ID <input ID>-placeholder so you could guess the correct span based on the ID of the input you are setting)