jQuery Mask Plugin:负整数的掩码

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

我使用以下掩码作为带小数分隔符的数字:

例如,对于元素:

 

我使用以下面具:

 $('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

由于插件不允许您在正则表达式模式中添加负/正向前瞻,因此我添加了一个onChange回调来防止-字符除了字符串的开头之外的任何地方。

  • .replace(/(?!^)-/g, '') – 这将删除所有不在行开头的字符。
  • .replace(/^,/, '') – 这将删除前导字符(即,它将从字符串中移除,123 ,,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(/^-,/, '-'); } }); 
    

只需选择一个字符来翻译信号,我的情况就是Z.

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

并将面具放在输入上。