html - 在 HTML 数字输入中显示尾随的小数零

Question

我无法在移动版 Safari 上显示默认字段值“1.10”。因为最后一位是零，所以显示为“1.1”。我在桌面系统上没有这个问题，只在移动 safari 上显示。

如果我将默认值设置为“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?