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有很多功能。见上面的链接。

更新：如果您使用的是Lazy loading，则必须在TextMaskModule或page's module内导入shared.module.ts，您还需要设置maxlength上的ion-input，以避免出现在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;
    }
}

离子3输入百分比掩码

2 个答案: