使用模式格式化数字类型输入中的值

Question

我正在尝试使用 html5

格式化我输入的值

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

我必须将位数固定为 3。这与 "%03d"

的效果相同

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

我创建了一个接口，我想为我的数字类型输入定义一个特定的格式。此格式为 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>

使用模式格式化数字类型输入中的值

Use a pattern to format value in input of type Number

html

javascript

input

angular-ui-bootstrap