How to display placeholder's text in HTML5'

2019-04-26 20:01发布

问题:

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?

回答1:

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.