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

以下是在Safari 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');
});

这只是从这个非常好的答案中获取的，它可能有其他解决方案来解决你的问题（虽然我不确定它是否适用于移动游猎）：How can I make the HTML5 number field display trailing zeroes?