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

您可以这样：

$('#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 Plugin：负整数的掩码

5 个答案: