jQuery Mask Plugin:负整数的掩码

Question

我在我的web项目中使用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模板尝试它

Answer 1

我扩展了你的最后一次尝试并将特殊#字符转换为递归接受数字和破折号(即/[\d-]/).然后我将掩蔽模式更改为#,##0.

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

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

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

此外,如果您想要在替换字符时阻止光标指示符跳转到字符串的末尾,您可以在此处利用我的其他答案中的代码.

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