防止 input type="number" 的值超过一个点并限制小数位数

Posted 2023-04-14

【中文标题】防止 input type="number" 的值超过一个点并限制小数位数

【英文标题】：Prevent input type=“number” from getting more than one dot in its value and limit decimals numbers

【发布时间】：2020-05-28 17:18:57

【问题描述】：

Inbefore：我知道这个问题在这个论坛上被问过不止一次。我知道我可以在这些其他帖子上发布我的答案。我的问题是，提出这些问题的用户是 3 到 4 年前提出的，并且查看他们的 autors 个人资料，他们似乎不太活跃，我相信这些问题永远不会被标记为已解决。

所以我一直在四处寻找帮助，但没有简单的解决方案可以限制用户在输入 type=“number” 中输入多个点。保持输入 type="number" 很重要，因为它可能会影响某些移动设备上的键盘。

我知道阻止键盘事件似乎是有限的，有些人可能会争辩说，该字段只应在提交、更改或模糊时进行评估。我说输入 type="number" 已经限制了某些按键的效果，这些按键不是数字或“e”或“.”，而且是即时发生的。

最重要的是，一些解决方案无法限制允许的浮点数。

【问题讨论】：

这不是 Stack Overflow 的工作方式。问题未标记为“已解决”。答案可能会被标记为“已接受”，但这仅对提问者有意义，对其他人没有意义。除非环境发生根本变化（例如，问题专门询问版本 1.22 并且答案需要 43.71），否则问题的年龄没有区别。在这种情况下，任何关于 input type="number" 的问题都可以使用或修改此处提供的代码。

这能回答你的问题吗？ Prevent typing non-numeric in input type number

不，因为它不会阻止输入多个点。

它根本不允许输入点，也不允许输入小键盘数字，这更糟糕。

“它”我假设您指的是公认的答案。如前所述，接受的答案仅与提问者相关；这是最能帮助他们的答案。这个问题还有 10 个其他答案。例如，this one 可以满足您的所有需求。

【参考方案1】：

你可以找到非常详细的解释in this Codepen

这个解决方案很简单，并且只允许在数字字段中使用一个点。它不会阻止点击返回号码并在"." 之前添加号码。它不会阻止执行浏览器键盘快捷键，例如刷新、复制和粘贴（只要粘贴的值是有效数字）等。它将允许在数字正文中添加"."，但会删除任何超出设置限制的浮动。

我仍然无法阻止的唯一行为是，如果您在输入结束时反复按点键，点会闪烁。发生这种情况是因为"13." 的类型化值是一个有效数字并返回"13"，而"13.." 的类型化值不是并返回“”。在我的解决方案中，如果一个值返回"" 而没有按退格键或删除键，它会回滚到最后一个有效值，即"13"，从键入的值"13." 获得。

我已经尝试过解决方案，如果一个点被按下一次，它会被阻止第二次触发，但每次我设法在已经存在的点之后按下点，然后什么都没有，然后得到除非我先按任何其他键，否则无法键入点。

我认为多次按下时闪烁是最好的解决方案，因为用户无法键入一个点而没有任何反应。

let lastValidInputValue;
let selectedDot = false;


const onKeypress = (e) => 
  if (e.key === "." && e.target.value.indexOf(".") !== -1 && !selectedDot) e.preventDefault();
  selectedDot = false;

  if (e.key === "e") e.preventDefault();
;


const onInput = (e) => 
  if (
    e.target.value.indexOf(".") < e.target.value.length - e.target.getAttribute("data-toFixed") - 1 &&
    e.target.value.indexOf(".") !== -1
  ) 
    let newValue;
    newValue = e.target.value.slice(
      0,
      e.target.value.indexOf(".") +
        parseInt(e.target.getAttribute("data-toFixed")) +
        1
    );
    newValue = parseFloat(newValue);
    e.target.value = newValue;
  
  if (e.target.value !== "") 
    lastValidInputValue = e.target.value;
   else if (e.inputType.match(/delete/g)) 
    lastValidInputValue = "";
   else 
    e.target.value = lastValidInputValue;
  
;

 const onSelect = (e) => 
   if(window.getSelection().toString().indexOf(".") > -1) selectedDot = true;
 

<input type="number" id="myNumber" name="myNumber" data-toFixed="2" step="any" onkeypress="onKeypress(event)" oninput="onInput(event)" onselect="onSelect(event)">

【讨论】：

如何让小数点后面的数字多于两位？

哦，我知道你只需要在输入表单中将数据更改为固定。