HTML input field hint

html textfield hint
Frank Vilea picture Frank Vilea · Jun 8, 2011 · Viewed 116.5k times · Source

I want to provide the user with a hint on what he needs to enter into my text field. However, when I set the value, it does not disappear once a user clicks on the text field. How can you make it disappear?

<form action="input_password.htm">
  <p>Username:<br><input name="Username" value="Enter username.." type="text" size="20" maxlength="20"></p>
</form>

Answer

aorcsik picture aorcsik · Jun 8, 2011

With a bit of JavaScript:

<input 
  value="Enter username..." 
  onfocus="if (this.value === 'Enter username...') this.value=''" ... />

HTML5 has a nice attribute for this, called placeholder:

<input placeholder="Enter username.." ... />

but this attribute is not supported in old browsers.

Related questions

jQuery Set Cursor Position in Text Area

How do you set the cursor position in a text field using jQuery? I've got a text field with content, and I want the users cursor to be positioned at a certain offset when they focus on the field. The …

Read More
Best way to restrict a text field to numbers only?

I'm using the following Javascript to restrict a text field on my website to only accept numerical input, and no other letters or characters. The problem is, it REALLY rejects all other key inputs, like ctrl-A to select the text, …

Read More
How to set the height of an input (text) field in CSS?

Sorry for this question but I can't seem to find an answer anywhere. I have CSS code that should set the height of my text box. I am using VS2010 Express for Windows phone, coding in HTML/CSS/Javascript/C#. …

Read More