使用模式来格式化 Number 类型的输入中的值

Question

我正在尝试使用 html5 格式化输入的值

我想要最小值 001 和最大值 999。 当我输入 1 时，我需要将值转换为 001。 010 年有 10 个。

我必须将位数固定为 3。 这和“%03d”的效果是一样的

我已经在互联网上检查了一个解决方案，这可能是我输入的一种模式，但经过多次尝试，我仍然卡住了。

我创建了一个接口，我想为我的 Number 类型的输入定义一个特定的格式。 这种格式是 3 位数的格式。 因此，如果您键入 1，则输入必须更正该值并转换为 001……否则它可以保留旧值并忘记错误的值。

input(type="number" min="001" max="999" pattern="xxxx", style="width: 45px ; text-align:center").input-sm#inputDut2-int

我知道，或者至少我认为，我可以用一种模式来解决这个问题。

Answer 1

在输入数字时，您将无法输入“012”，因为 012 === 12。 您必须改为使用文本输入。

在此文本输入中，您可以根据需要格式化输入，只需填充值：

function padLeftWithBounds(input, padChar, maxLength, min, max) {
  if (input <= min)
    return min;
  if (input >= max)
    return max;

  var s = input.toString(10);
  var padding = "";
  for (var i = 0; i < maxLength; ++i)
    padding += padChar;

  return padding.substring(0, maxLength - s.length) + s;
};

$("input").on("keyup", function() {
  if (!$(this).val())
    return;
  $(this).val(padLeftWithBounds(parseInt($(this).val()), '0', 3, 0, 999));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" />
</form>