有没有办法抑制 <input type="number"> 的科学记数法？

Posted 2023-03-05

【中文标题】有没有办法抑制 <input type="number"> 的科学记数法？

【英文标题】：Is there a way to suppress scientific notation for <input type="number">?

【发布时间】：2016-01-12 23:46:06

【问题描述】：

我想输入带有<input> 元素的最多八个小数点的数字。但是，如果我有一个 <input type="number" step="0.00000001"> 并使用输入元素上的向上/向下箭头（在 Chrome 上；这里是 jsfiddle），那么我会得到小数字的科学记数法：

如果我输入 5，然后按箭头键，那么科学记数法就会被抑制：

有没有办法让浏览器将1e-8 显示为0.000000001？

另外，如果数字足够小，我会遇到浮点舍入错误吗？

<input type="number" step="0.00000001">

【问题讨论】：

值得一提的是，数字并不总是以科学计数法显示。该答案解释了何时会发生这种情况：***.com/a/46231666/11298742

【参考方案1】：

<input oninput='precise(this)' type="number" step="0.00000001">

<script>
  function precise(elem) 
    elem.value = Number(elem.value).toFixed(8);
  
</script>

您可以根据需要将toFixed 参数更改为所需的小数位数。我希望这会有所帮助！

【讨论】：

你可以用oninput=precise(this)传递特定的input元素，然后做function precise(el) el.value = Number(el.value).toFixed(8);

【参考方案2】：

这是基于 StardustGogeta 的 answer 的变体：

<input oninput="this.value=Number(this.value).toFixed(this.step.split('.')[1].length)" type=number step="0.00000001">

【讨论】：

当您绑定到oninput 时，它会在您单击输入字段旁边的箭头时起作用，但它不允许您输入。如果您将oninput 替换为onclick，它可以让您输入并且只有在您使用箭头时才会修改内容。