jQuery Mask Plugin：负整数的掩码

Question

我在我的网络项目中使用jQuery Mask Plugin。它被广泛使用，我暂时不想更改它。

我对带有小数分隔符的数字使用以下掩码：

例如对于元素：

<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 template

Answer 1

我扩展了您上次的尝试并将特殊的 # 字符转换为递归地接受数字和破折号（即 /[\d-]/）。然后我将屏蔽模式更改为#,##0。

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

• .replace(/(?!^)-/g, '') - 这将删除所有不在行首的 - 字符。
• .replace(/^,/, '') - 这将删除前导 , 字符（即，它将从 ,123 之类的字符串中删除 ,）。
• .replace(/^-,/, '-') - 这将删除紧跟在- 字符之后的, 字符（即，它将从-,123 中删除,）。

Updated Example

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

此外，如果您想在替换字符时将prevent the cursor indicator from jumping 放在字符串的末尾，您可以利用我的另一个answer here 中的代码。

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

Answer 2

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

$("#input").mask("Z0999999.00", {

   translation: {
     '0': {pattern: /\d/},
     '9': {pattern: /\d/, optional: true},
     'Z': {pattern: /[\-\+]/, optional: true}
   }

});

并将掩码放在输入上。

<input id="input"/>

Answer 3

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

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

Answer 4

/* 对于负十进制值 */

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

Answer 5

你可以这样做：

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

如果你使用de charactere #，你不能用-初始化数字然后使用0翻译

1. value.replace(/^-\./, '-') 这会将-. 之类的字符串更改为 -
2. replace(/^-,/, '-') 这会将-, 之类的字符串更改为-
3. replace(/(?!^)-/g, '') 这将删除字符- 不在行首