防止输入type=“数字”在其值中获得多个点，并限制小数

Question

之前:我知道这个问题在这个论坛上已经被问过不止一次了。我知道我可以把我的答案贴在其他的帖子上。我的问题是，用户提出这些问题是在3-4年前做的，看看他们的用户简介，他们似乎不太活跃，我相信这些问题永远不会被标记为解决了。

因此，我一直在四处寻找帮助，以准确地做到这一点，没有简单的解决方案允许用户在输入type=的“数字”中输入多个点。保持输入的type=“数字”很重要，因为它可能会影响某些移动设备上的键盘。

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

最重要的是，一些解决方案使得不可能限制允许的浮动数量。

Answer 1

您可以找到非常详细的解释在这个科德芬

这个解决方案很简单，并且只允许数字字段中的一个点。它并不阻止在"."前单击数字并添加数字。它不会阻止执行浏览器键盘快捷键，如刷新、复制和粘贴(只要粘贴的值是一个有效的数字)和其他。它将允许添加"."与该数字的主体，但将删除任何超过设定的限制浮动。

唯一我仍然无法阻止的行为是，如果你反复按下输入末尾的点键，这个点就会不停地闪烁。这是因为"13."的类型化值是一个有效的数字，并返回"13"，而"13.."的类型化值不存在并返回"“。在我的解决方案中，如果一个值在不按backspace或delete的情况下返回""，它将回滚到从类型化值"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)">

​