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

时间:2016-05-17 14:17:54

标签: javascript html5 input angular-ui-bootstrap

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

我希望最小值为001,最大值为999。 当我输入1时,我需要将值转换为001。 010中有10个。

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

的效果相同

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

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

输入(type =“number”min =“001”max =“999”pattern =“xxxx”,style =“width:45px; text-align:center”)。input-sm #inputDut2-int

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

1 个答案:

答案 0 :(得分:0)

在数字输入上,您无法输入" 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));
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" />
</form>
&#13;
&#13;
&#13;