jQuery Mask插件:负整数的掩码 [英] jQuery Mask Plugin: mask for negative integers

问题描述

我在我的Web项目中使用 jQuery Mask插件.它被广泛使用，我暂时不想更改它.

I am using jQuery Mask Plugin in my web project. It is used widely and I don't want to change it for now.

对于带小数点分隔符的数字，我使用以下掩码:

I use the following mask for the numbers with decimal separators:

例如元素:

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

我使用以下面具:

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

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

It works for positive numbers, but now I would like to add support of negative numbers.

以下两种模式均无效:

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

Last one seems working, but only for 4 digits in the line.

如何使用此插件来处理负数?如果有人可以提出想法，我甚至可以考虑修补此插件.

How can I use this plugin for negative numbers? I may consider even patching this plugin if someone can propose an idea.

您可以尝试使用 jsFiddle模板

推荐答案

我扩展了您的上一次尝试，并翻译了特殊的#字符以递归地接受数字和破折号(即/[\d-]/).然后我将遮罩图案更改为#,##0.

I expanded off of your last attempt and translated the special # character to recursively accept digits and dashes (i.e., /[\d-]/). Then I changed the masking pattern to #,##0.

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

Since the plugin doesn't allow you to add negative/positive lookaheads in the regular expression pattern, I added an onChange callback to prevent - characters from being anywhere but the beginning of the string.

• .replace(/(?!^)-/g, '')-这将删除所有不在行首的-字符.
• .replace(/^,/, '')-这将删除开头的,字符(即，它将从诸如,123之类的字符串中删除,).
• .replace(/^-,/, '-')-这将直接删除-个字符之后的,个字符(即，它将从-,123个中删除,个字符).

• .replace(/(?!^)-/g, '') - This will remove all of the - characters that are not at the beginning of the line.
• .replace(/^,/, '') - This will remove leading , characters (i.e., it would remove the , from a string like ,123).
• .replace(/^-,/, '-') - This will remove , characters directly following - characters (i.e., it would remove , from -,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">

此外，如果您想在此处回答.

Additionally, if you want to 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">

这篇关于jQuery Mask插件:负整数的掩码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！