Ionic 3輸入百分比掩碼

Question

我想聽聽有關如何完成此操作的任何建議或建議。要求是創建一個輸入掩碼指令，該指令只允許用戶輸入數字，可選2位小數，並且在輸入字段內還有％符號。任何想法，或者如果有什麼已經爲此建成將非常感激， 在此先感謝！

Answer 1

跟着山姆的建議，用文字面罩解決：

<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; 
    } 
} 

Answer 2

希望你可以使用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裏面，你也需要設置在ion-input的maxlength，以避免將出現在blur event多餘的字符。