Input[type=number] 不带多个小数答案

【问题标题】：Input[type=number] without multiple decimalsInput[type=number] 不带多个小数
【发布时间】：2020-09-30 13:44:17
【问题描述】：

我想创建一个 input[type=number]，它不允许多个小数和所有非数字，包括字母 e。问题是，适用于 input[type=text] 的正则表达式不适用于 input[type=number]。

当我记录到控制台输入多个小数的数字值时，该值为空。

这里是 Codepen： https://codepen.io/btn-ninja/pen/oNxRoJN?editors=1111

HTML

  <input type="number" 
   class="isDecimal" 
   placeholder="Type 2.3.4 and watch console"
   maxlength="20">

$('.isDecimal').on("input", function(e) {
  var num = $(this).val().toString();
  console.log(num);
});

【问题讨论】：

标签： html jquery regex

【解决方案1】：

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;
 }

&lt;input type="number" id="myNumber" name="myNumber" data-toFixed="2" step="any" onkeypress="onKeypress(event)" oninput="onInput(event)" onselect="onSelect(event)"&gt;

这个原贴在这个question

【讨论】：

哇，做得很好，我一直在研究这个问题一段时间，断断续续。谢谢！