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 fiel
I have the same problem, and I have add this code to my application and its work fine for me.
step -1 : added the jquery.placeholder.js plugin
step -2 :write the below code in your area.
$(function () {
$('input, textarea').placeholder();
});
And now I can see placeholders on the input boxes!
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.
I think for your situation, the easy and simple for your html input , you can probably add the attribute title
<input name="Username" value="Enter username.." type="text" size="20" maxlength="20" title="enter username">
You'd need attach an onFocus
event to the input field via Javascript:
<input type="text" onfocus="this.value=''" value="..." ... />
If you mean like a text in the background, I'd say you use a label with the input field and position it on the input using CSS, of course. With JS, you fade out the label when the input receives values and fade it in when the input is empty. In this way, it is not possible for the user to submit the description, whether by accident or intent.
the best way to give a hint is placeholder like this:
<input.... placeholder="hint".../>