Why Cannot the Browser Show Percent Sign In HTML Input Text Field?

Amazon When I was working on Michael's Taiwan Stock ROE Calculator I set the value of an input text field to be 0% like the following:

<input type='number' id='goldenValue' value='0%' disabled></input>

I was using HTML5 input type type='number' to restrict the value of the text field to a number. To my surprise, when the webpage is rendered in Google Chrome web browser, I do not see the value 0% in the text field! I had no idea why it happened....

Solution

..until I realized that Chrome did not show 0% because % is not validated as a number! So the solution is simple. Either change the default value of the input field or remove type='number' from the input field attribute list.

The behavior of HTML5 input types is not same for every browser. I saw 0% in Firefox, for example, when I had type='number' in the HTML markup.

So if you set the value of an input field to something but the value is now shown when rendered, check to see if you use any HTML5 input type checking. It can well be the source of the problem.

Questions? Let me know!