在HTML数字输入上显示尾随的十进制零

Question

我在移动Safari上显示默认字段值"1.10"时遇到问题.因为最后一位是零,所以它显示为"1.1".我在桌面系统上没有这个问题,只是在移动游猎中显示.

如果我将默认值设置为"1.11",则显示所有数字,但"1.10"显示为"1.1".如何强制Mobile Safari将"1.10"显示为默认表单值？

这是我的代码.

     <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>

以下是在Mobile Safari上显示问题的屏幕截图(通过Xcode模拟器)

第一张图像显示1.11设置为默认值,显示正确的数字.然后设置为1.10,这将切断零.

您可以在桌面和iOS设备上的EZMonthlyPayment.com上自行测试.

Answer 1

您可以使用一些偷偷摸摸的 JavaScript 在文本和数字类型之间交换输入：

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

这只是取自这里的这个非常好的答案，它可能对您的问题有其他解决方案（尽管我不确定它是否适用于移动Safari）：How can I make the HTML5 number field display Trailing Zeroes?