jQuery 屏蔽输入前导零

Question

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

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

这适用于四位数字 1234 => 12.34 等等。

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

Answer 1

一种解决方案是使用（或 polyfill）padStart()。

来自 MDN 文档：

padStart() 方法用另一个字符串（重复，如果需要）填充当前字符串，以使结果字符串达到给定长度。从当前字符串的开头（左侧）应用填充。

下面是一个示例，给定您的标准，使用对 polyfill 方法的微小修改。该代码将添加您在页面加载时要查找的前导零。但是，由于 jQuery 屏蔽的方式，此代码 sn-p 不会在您键入时将零替换为值。

$(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);
  }
}