Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to display placeholder's text in HTML5's number-typed input

Is there a way I can show placeholder text inside an input tag of type=number?

Detailed Q: The property 'placeholder' of an HTML's input tag is used to show description about the input tag in the UI when the element is not focused - the descriptive text goes blank when the same field gets focus. The problem is no text is visible if the input type is made of type="number". I do have space limitations in my UI and cannot afford a label before the input tag.

Any suggestions?

like image 856
amandeepsingh bajwa Avatar asked Sep 13 '11 11:09

amandeepsingh bajwa


1 Answers

Placeholders aren't intended as labels for input. Placeholder should contain examples of valid input. So in case of a number input the only valid value for placeholder is a number.

But if you want to misuse the placeholder to save room you could just use a little JS to fix your problem.

<input placeholder="Amount" onfocus="this.type='number';">

PS Chrome Nightly seems to have no problem with combining number and placeholder.

like image 96
Gerben Avatar answered Nov 15 '22 21:11

Gerben