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

Question

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

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

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

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

Answer 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)">