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

Question

我想做一个禁止多个小数和包括字母e在内的所有非数字的inputtype=number。问题是，适用于inputtype=text的正则表达式不适用于inputtype=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"> 

JS

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

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

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

​

此原件发布在此question中