我在我的web项目中使用jQuery Mask Plugin.它被广泛使用,我现在不想改变它.
我使用以下掩码作为带小数分隔符的数字:
例如对于元素:
我使用以下面具:
$('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模板尝试它
我扩展了你的最后一次尝试并将特殊#
字符转换为递归接受数字和破折号(即/[\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(/^-,/, '-');
}
});