4

我在我的网络项目中使用jQuery Mask 插件。它被广泛使用，我现在不想更改它。

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

例如对于元素：

<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 模板试试

4

5 回答 5

12

我扩展了您上次的尝试并将特殊#字符转换为递归地接受数字和破折号（即，/[\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">

于 2016-01-07T18:27:46.653 回答
2

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

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

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

});

并将掩码放在输入上。

<input id="input"/>
于 2017-02-10T23:58:38.213 回答
0

/* 对于负十进制值 */

$('.money').mask("#.##0,00", {
  reverse: true,
  translation: {
    '0': { pattern: /\d/ },
    '#': {
      pattern: /\-|\d/, /*signal included*/
      recursive: true
    },
  }
});
于 2020-12-23T15:22:18.870 回答
0

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

$(this).find("td.selling").each(function (i, element) {
        $(element).unmask().mask('###.###.###.###.###.###.###.###', {
            reverse: true,
            translation: {
                '#': {
                    pattern: /\-|\d/,
                    recursive: true
                }
            },
        });
        $(element).text($(element).text().replace('-.', '-'));
       
    });
于 2020-08-27T11:17:11.223 回答
-1

你可以这样做：

$('#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 #，你不能初始化number然后- 用于0翻译

  1. value.replace(/^-\./, '-')这会将字符串更改-.为 -
  2. replace(/^-,/, '-')这会将字符串更改-,为-
  3. replace(/(?!^)-/g, '')这将删除-不在行首的字符
于 2019-12-24T21:02:40.957 回答