获取数字输入字段上的输入值，而不是解析的

Question

我正在对以下字段进行输入验证，我想设置一个默认值。我的意思是默认值是如果字段为空，我想为输入字段设置一些值。

var inputBox = document.getElementById("inputBox");

inputBox.addEventListener("input", function() {
  validateInput(this);
});

inputBox.addEventListener("keydown", function(e) {
  validateInput(this, e);
});

function validateInput(elm, e) {
  // handle keydown event
  if (e) {
    // do not allow floating-point numbers, if it's not expected
    if (!isFloat(elm.step)) {
      if (e.key == ".") {
        e.preventDefault();
      }
    }
  }
  // handle input event
  else {
    // do not allow leading zeros
    while (elm.value.length > 1 && elm.value[0] === "0") {
      elm.value = elm.value.toString().slice(1);
    }
    // input should be between min and max
    if (elm.validity.rangeUnderflow) {
      elm.value = elm.min;
    } else if (elm.validity.rangeOverflow) {
      elm.value = elm.max;
    }
  }
}

function isFloat(x) {
  var f = parseFloat(x);
  var floor = Math.floor(f);
  var fraction = f - floor;
  if (fraction > 0) {
    return true;
  }
  return false;
}

<input type="number" id="inputBox" min="0" max="16581375" step="1" value="0" />

在一个非常简单的方法中，我可以将以下内容添加到validateInput() 的末尾

// set default value, empty field isn't allowed
if (elm.value == "") {
    elm.value = elm.min;
}

但这会破坏一些功能。例如，我不能输入指数值（例如1e+5）。

输入字段在输入时进行自己的检查。在我输入1e 的那一刻，它的计算结果为NaN，并且元素的value 属性设置为""，但在视觉上，1e 仍然输入到该字段中。所以，你看，输入的值和HTMLInputElement.value 可能不同。

为了能够设置默认值，我应该能够检查输入的值，而不是元素解析的值。这样的事情可能会起作用：

// set default value, empty field isn't allowed
if (elm.value == "" && !elm.stringValue.includes(e)) {
    elm.value = elm.min;
}

当然，没有这样的stringValue 属性。我能想到的解决此问题的一种方法是使用文本输入字段并对数字进行额外验证。

有没有办法让它与数字输入字段一起工作？

Answer 1

看起来您需要将指数值解析为数字。

我认为，这个解决方案应该可以帮助你：https://stackoverflow.com/a/18719988/6420563

此解决方案适用于文本字段，但我认为它也适用于数字输入。