Show trailing decimal zeroes on HTML number input

Question

I'm having trouble displaying the default field value of "1.10" on mobile Safari. Because the last digit is a zero, it's displaying as "1.1". I am not having this problem on desktop systems and is only being shown on mobile safari.

If I set the default value as "1.11" then all the digits show, however "1.10" displays as "1.1". How do I force Mobile Safari to display "1.10" as the default form value?

This is my code.

     <label id="mortIns_lbl" for=mortIns>Mortgage Ins. (PMI):</label><div class="dollar">$</div>
      <input id=mortIns class=narrow name=mortIns type=text readonly>
      <input class="percent necessary" id=miPerc name=miPerc type=number onblur=loan() min="0"
                 max="3"
                 step=".01"
                 value="1.10"><div class="pct">%</div><a title="Most mortgage banks will require mortgage insurance if the down payment is less than 20% of the total purchase price of the property. Once 20-25% of the principal has been payed down, the PMI should be removed. However, until that happens, the mortgage insurance payment will remain. 1.1% is the average, but for further clarification talk to a professional lender.">?</a>
      </li>

And here are screen shots showing the problem on Mobile Safari (through Xcode emulator)

The first image shows 1.11 set as the default value, showing the proper digits. Then set as 1.10, which cuts off the zero.

You can test this yourself at EZMonthlyPayment.com on your desktop and iOS device.

Answer 1

You could use a sneaky bit of JavaScript to swap the input between text and number type:

var numInput = document.getElementById('numInput');
numInput.addEventListener('keypress', function () {
    this.setAttribute('type', 'text');
});
numInput.addEventListener('click', function () {
    this.setAttribute('type', 'number');
});

This is just taken from this really good answer here, it may have other solutions to your problem (although I'm not sure if it works with mobile safari): How can I make the HTML5 number field display trailing zeroes?