1

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.

Community
  • 1
  • 1
Vor
  • 33,215
  • 43
  • 135
  • 193
  • It does work provided the element exists at the time of the call and has the id `FirstName` – Esailija Nov 26 '12 at 23:44
  • I think this has what you are looking for: http://stackoverflow.com/questions/108207/how-do-i-make-an-html-text-box-show-a-hint-when-empty – zbrunson Nov 26 '12 at 23:44

1 Answers1

4

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)

Community
  • 1
  • 1
Jason Sperske
  • 29,816
  • 8
  • 73
  • 124
  • good point, but let me change the question now, how to clear span? – Vor Nov 26 '12 at 23:49
  • thank you very very much!!! I did `document.getElementById("firstname-placeholder").style.display = "none";` and it's gone ))) – Vor Nov 26 '12 at 23:57