是否可以为 jQuery 掩码添加后缀?
Is it possible to add a suffix to a jQuery mask?
我正在使用 Igor Escobar 的 jQuery 遮罩插件 (https://github.com/igorescobar/jQuery-Mask-Plugin),我正在尝试向遮罩添加后缀以在遮罩末尾显示 %
符号输入值。
我正在构建的应用程序是针对巴西用户的,那么我必须使用这种数字格式:000.000,00
。其中 ,
(逗号)是小数点分隔符,.
(点)是千位分隔符。
我写了下面的代码来应用蒙版,还没有在它的末尾附加 %
符号。
$('.mask-decimal').each(function () {
var $self = $(this);
var precision = parseInt($self.data('precision'), 10) || 2;
var mask = '#.##0,' + (new Array(precision + 1).join('0'));
$self.mask(mask, {
reverse : true,
maxlength : false
});
$self.on('keyup', function () {
var val = this.value;
if (val) {
if (val.length <= precision) {
while (val.length < precision) {
val = '0' + val;
}
val = '0,' + val;
} else {
var parts = val.split(',');
parts[0] = parts[0].replace(/^0+/, '');
if (parts[0].length === 0) {
parts[0] = '0';
}
val = parts.join(',');
}
this.value = val;
}
});
});
这个面具效果很好。
我尝试做的是在掩码末尾添加百分号,然后在 keyup
处理程序的开头将其删除,最后在 return价值。我基本上改变了这些行:
var mask = '#.##0,' + (new Array(precision + 1).join('0')) + '%';
var val = this.value.replace('%', '');
this.value = val + '%';
更改后,我可以在字段中输入值,但我不能 clear/change 使用退格键。如果我足够快,我可以 select 全部内容并将其删除,但这对普通用户来说是一个糟糕的解决方案。之所以会这样,是因为光标总是停留在输入的末尾,而且 keyup 事件的触发速度非常快。
考虑到这一点,有没有办法将光标移动到输入框内的特定位置?有人可以看到另一种更改我的功能的方法,以便用户可以使用退格键清除输入内容吗?
如果这是一个输入字段,而 %
符号只是为了装饰,您可以在输入上方放置一个包含该符号的范围。因为它纯粹是一个陈列品,对吧?或者你可以在输入后有符号。
如果用户不应该编辑它,则绝对没有必要在输入中包含它。这对用户和您的逻辑都是违反直觉的。
这里我把标志放在标签里,这样点击它就会激活输入框。
label, input {
font-size:18px;
font-family:sans-serif;
}
label {
margin-left:-24px;
}
input {
text-align:right;
padding-right:24px;
}
<input type="text" id="number" value="123">
<label for="number">%</label>
我正在使用 Igor Escobar 的 jQuery 遮罩插件 (https://github.com/igorescobar/jQuery-Mask-Plugin),我正在尝试向遮罩添加后缀以在遮罩末尾显示 %
符号输入值。
我正在构建的应用程序是针对巴西用户的,那么我必须使用这种数字格式:000.000,00
。其中 ,
(逗号)是小数点分隔符,.
(点)是千位分隔符。
我写了下面的代码来应用蒙版,还没有在它的末尾附加 %
符号。
$('.mask-decimal').each(function () {
var $self = $(this);
var precision = parseInt($self.data('precision'), 10) || 2;
var mask = '#.##0,' + (new Array(precision + 1).join('0'));
$self.mask(mask, {
reverse : true,
maxlength : false
});
$self.on('keyup', function () {
var val = this.value;
if (val) {
if (val.length <= precision) {
while (val.length < precision) {
val = '0' + val;
}
val = '0,' + val;
} else {
var parts = val.split(',');
parts[0] = parts[0].replace(/^0+/, '');
if (parts[0].length === 0) {
parts[0] = '0';
}
val = parts.join(',');
}
this.value = val;
}
});
});
这个面具效果很好。
我尝试做的是在掩码末尾添加百分号,然后在 keyup
处理程序的开头将其删除,最后在 return价值。我基本上改变了这些行:
var mask = '#.##0,' + (new Array(precision + 1).join('0')) + '%';
var val = this.value.replace('%', '');
this.value = val + '%';
更改后,我可以在字段中输入值,但我不能 clear/change 使用退格键。如果我足够快,我可以 select 全部内容并将其删除,但这对普通用户来说是一个糟糕的解决方案。之所以会这样,是因为光标总是停留在输入的末尾,而且 keyup 事件的触发速度非常快。
考虑到这一点,有没有办法将光标移动到输入框内的特定位置?有人可以看到另一种更改我的功能的方法,以便用户可以使用退格键清除输入内容吗?
如果这是一个输入字段,而 %
符号只是为了装饰,您可以在输入上方放置一个包含该符号的范围。因为它纯粹是一个陈列品,对吧?或者你可以在输入后有符号。
如果用户不应该编辑它,则绝对没有必要在输入中包含它。这对用户和您的逻辑都是违反直觉的。
这里我把标志放在标签里,这样点击它就会激活输入框。
label, input {
font-size:18px;
font-family:sans-serif;
}
label {
margin-left:-24px;
}
input {
text-align:right;
padding-right:24px;
}
<input type="text" id="number" value="123">
<label for="number">%</label>