jQuery 屏蔽输入前导零

Question

我正在使用 jQuery Masked Input 来屏蔽一个四位数的美元金额，使用小数点分隔符但没有定界符 ($)。所以，就像这样：xx.xx

这是我的代码示例：$('input[id^="myMaskedInput"]').mask("?99.99");

这对四位数 1234 => 12.34 等非常有用。

我的问题是当我输入一位、两位或三位数字时。例如，我需要 123 来屏蔽 01.23，而不是 12.30。即，我需要一个或多个前导零。

Answer 1

一个解决方案是使用（或 polyfill with）padStart().

来自 MDN 文档：

The padStart() method pads the current string with another string (repeated, if needed) so that the resulting string reaches the given length. The padding is applied from the start (left) of the current string.

下面是一个示例，根据您的标准对 polyfill 方法进行了较小的修改。该代码将添加您在页面加载时查找的前导零。但是，由于 jQuery 掩码的方式，此代码片段不会在您键入时将零替换为值。

$(document).ready(function() {

  $('input[id^="myMaskedInput"]').val( function(index, value) {
    return padStart(value, 4, "0");
  }).mask("?99.99");

});

function padStart(value, targetLength,padString) {
  targetLength = targetLength>>0; //floor if number or convert non-number to 0;
  padString    = String(padString || ' ');

  if (value.length > targetLength) {
    return String(value);
  }
  else {
    targetLength = targetLength-value.length;

    if (targetLength > padString.length) {
      padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
    }

    return padString.slice(0,targetLength) + String(value);
  }
}

jQuery 屏蔽输入前导零

jQuery Masked Input leading zero(s)

jquery

jquery-plugins