jQuery Mask插件:负整数的掩码

jQuery Mask Plugin: mask for negative integers

本文关键字：整数 掩码 Mask 插件 jQuery      更新时间：2023-09-26

我在我的web项目中使用jQuery Mask插件。它被广泛使用，我现在不想改变它。

我使用以下掩码来表示带小数分隔符的数字：

例如元素：

<input class="number-field" value="123456">

我使用以下掩码：

$('input.number-field').mask('#,##0', {'reverse': true});

它适用于正数，但现在我想添加对负数的支持。

以下两种模式都不起作用：

$('input.number-field').mask('#,##0Z', {
  reverse: true,
  translation: {
    'Z': {
      pattern: /'-?/
    }
  }
})
$('input.number-field').mask('Z#,##0', {
  reverse: true,
  translation: {
    'Z': {
      pattern: /'-?/
    }
  }
})
$('input.number-field').mask('Z#,##0', {
  reverse: true,
  translation: {
    'Z': {
      pattern: /-/,
      optional: true
    }
  }
})

最后一个似乎有效，但只适用于行中的4位数字。

我如何使用这个负数插件？如果有人能提出一个想法，我甚至可以考虑修补这个插件。

您可以使用jsFiddle模板

进行尝试

我扩展了上次尝试的内容，并翻译了特殊的#字符，以递归方式接受数字和短划线（即/['d-]/）。然后我将掩蔽模式更改为#,##0。

由于该插件不允许在正则表达式模式中添加负/正lookahead，所以我添加了一个onChange回调，以防止-字符位于字符串开头以外的任何位置。

  • .replace(/(?!^)-/g, '')-这将删除不在行开头的所有-字符
  • .replace(/^,/, '')-这将删除前导,字符（即，它将从类似,123的字符串中删除,）
  • .replace(/^-,/, '-')-这将直接删除-字符后面的,字符（即，它将从-,123中删除,）

更新示例

$('input.number-field').mask('#,##0', {
  reverse: true,
  translation: {
    '#': {
      pattern: /-|'d/,
      recursive: true
    }
  },
  onChange: function(value, e) {      
    e.target.value = value.replace(/(?!^)-/g, '').replace(/^,/, '').replace(/^-,/, '-');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.13.4/jquery.mask.min.js"></script>
<input class="number-field" value="123456">

此外，如果你想防止光标指示器在替换字符时跳到字符串的末尾，你可以利用我在这里的另一个答案中的代码。

$('input.number-field').mask('#,##0', {
  reverse: true,
  translation: {
    '#': {
      pattern: /-|'d/,
      recursive: true
    }
  },
  onChange: function(value, e) {
    var target = e.target,
        position = target.selectionStart; // Capture initial position
    target.value = value.replace(/(?!^)-/g, '').replace(/^,/, '').replace(/^-,/, '-');
    target.selectionEnd = position; // Set the cursor back to the initial position.
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.13.4/jquery.mask.min.js"></script>
<input class="number-field" value="123456">

只需选择一个字符来翻译信号，在我的情况下是Z。

$("#input").mask("Z0999999.00", {
   translation: {
     '0': {pattern: /'d/},
     '9': {pattern: /'d/, optional: true},
     'Z': {pattern: /['-'+]/, optional: true}
   }
});

并在输入上加上掩码。

<input id="input"/>

如果回调不起作用，您可以

$(this).find("td.selling").each(function (i, element) {
        $(element).unmask().mask('###.###.###.###.###.###.###.###', {
            reverse: true,
            translation: {
                '#': {
                    pattern: /'-|'d/,
                    recursive: true
                }
            },
        });
        $(element).text($(element).text().replace('-.', '-'));
       
    });

/*对于负十进制值*/

$('.money').mask("#.##0,00", {
  reverse: true,
  translation: {
    '0': { pattern: /'d/ },
    '#': {
      pattern: /'-|'d/, /*signal included*/
      recursive: true
    },
  }
});

您可以这样做：

$('#input').mask('000.000,00', {
            reverse: true,
            translation: { 
                '0': {
                    pattern: /-|'d/,
                    recursive: true
                }
            },
onChange: function(value, e) {
    e.target.value = value.replace(/^-'./, '-').replace(/^-,/, '-').replace(/(?!^)-/g, '');
    }
});

如果使用非字符#，则在使用0翻译之前，不能使用-初始化数字

  1. value.replace(/^-'./, '-')这将把类似-.的字符串更改为-
  2. replace(/^-,/, '-')这将把类似-,的字符串更改为-
  3. replace(/(?!^)-/g, '')这将删除以下字符-不在行的开头
相关文章：