Question

我正在使用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处理程序的开头删除它，最后在返回值之前再次附加它。我基本上改变了这些界限：

var mask = '#.##0,' + (new Array(precision + 1).join('0')) + '%';

var val = this.value.replace('%', '');

this.value = val + '%';

更改后，我可以在字段中输入值，但我无法使用退格键清除/更改它。如果我足够快，我可以选择整个内容并将其删除，但对于普通用户来说，这是一个糟糕的解决方案。它以这种方式发生，因为光标始终位于输入的末尾，并且很快就会触发keyup事件。

考虑到这一点，有一种方法可以将光标移动到输入内的特定位置吗？有人可以看到另一种方法来改变我的功能，以便用户可以使用退格键清除输入内容吗？

Answer 1

如果这是输入字段，而%符号仅用于装饰，则可以在输入上方放置包含符号的范围。因为它纯粹是一个展示项目，对吧？或者你可以在输入后有标志。

如果用户不能编辑它，则完全没有必要在输入中使用它。这对用户和逻辑都是违反直觉的。

在这里，我将标志放在标签内，以便点击它将激活输入字段。

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>

是否可以为jQuery掩码添加后缀？

1 个答案: