Ionic 3 输入百分比遮罩

Question

我想听听有关如何完成此任务的任何意见或建议。要求是创建一个输入掩码指令，只允许用户输入数字，可选 2 个小数，并且在输入字段内还有 % 符号。任何想法，或者如果已经为此构建了任何东西，将不胜感激，提前致谢！

Answer 1

希望你能使用text-mask模块。

但您需要安装Ionic 3兼容版本，如下所示。

npm install angular2-text-mask@8.0.2 --save

如下更改 package.json（即删除 ^）

  "angular2-text-mask": "8.0.2",

这个module有很多特点。见上link.

更新： 如果您使用的是 Lazy loading，那么您必须在 page's module 或 shared.module.ts 中导入 TextMaskModule 并且您还需要在 ion-input 上设置 maxlength 以避免在 blur event.

上出现额外的字符

Answer 2

按照 Sam 的建议，用文本掩码解决了：

<input type="tel" [(ngModel)]="percent"
[textMask]="{mask: mask, pipe: percentage, guide:false}" />

和..

mask(obj) {
    return [ /\d/, /\d|./, /\d|./, /\d/, /\d/ ];
};

percentage(value) {
    var num = value.replace('%', '');
    if (isNaN(num)) {
        if (num % 1 != 0) {
            num = parseFloat(num).toFixed(2);
        }
        return num + '%';
    } else {
        return false;
    }
}

Ionic 3 输入百分比遮罩

Ionic 3 Input Percentage Mask

typescript

angular2-forms

ionic3

angular