jQuery Mask 插件：负整数的掩码

Question

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

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

例如元素：

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

我使用以下掩码：

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

它适用于 positive 数字，但现在我想添加对 negative[=37= 的支持] 数字。

以下模式均无效：

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

由于插件不允许您在正则表达式模式中添加 negative/positive 前瞻，我添加了一个 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 to the end of the string when replacing the characters, you could leverage the code from my other 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

你可以这样做：

$('#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 翻译

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

Answer 4

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

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

Answer 5

/* 对于负十进制值 */

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

jQuery Mask 插件：负整数的掩码

jQuery Mask Plugin: mask for negative integers

javascript

regex

jquery

jquery-mask