<input type="text" placeholder="Search Products" name="product" />
Which results in
Where the text ‘Search Products’ disappears on focus and reappears on blur if the field is still empty. This text is not the ‘value’ of the field.
- If the value of the field is set to empty programmatically (using JS) the placeholder will appear (and vice versa when text is programmatically applied).
- When the form is submitted with a placeholder visible, the value of the placeholder is not submitted.
Yep, it is and furthermore, it was very difficult to find such a thing. So, when I did, I figured it was well worth sharing. There are many such plugins but this is the only one I found which actually supported the highlighted points above. I.e. :
- Programmatically clearing the field causes the placeholder to reappear.
- There are no tricks using the value attribute. i.e. if you submit this form with the placeholder present, the value of the placeholder is not submitted as the value (which is the case with many such alternative solutions)
I take 0 credit for this, I’m simply sharing:
jquery-placeholder : https://github.com/mathiasbynens/jquery-placeholder
jquery-placeholder demo : http://mathiasbynens.be/demo/placeholder
All credit to the authors.