Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

以非常简单的方式，我可以将以下内容添加到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

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

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

1 个答案: