PrimeNG p-inputNumber 与货币不会强制使用移动设备仅输入数字答案

【问题标题】：PrimeNG p-inputNumber with currency does not force input only of numbers using mobile devicesPrimeNG p-inputNumber 与货币不会强制使用移动设备仅输入数字
【发布时间】：2021-07-17 06:45:54
【问题描述】：

我正在使用来自 PrimeNG 的 <p-inputNumber> 标签。

在计算机视图中，输入只允许输入数字。如果我用键盘按任何字母，则该字母不会写在输入端。没关系。

但是，当我使用移动设备（带有 chrome 的 Android）时，网络浏览器允许我写其他任何东西。

我一直在阅读一些关于使用基本 html <input> 标签强制输入数字的帖子。但是，正如我所说，我正在使用带有货币选项的primeng标签<p-inputNumber>：

<p-inputNumber [(ngModel)]="newExpenseAmount" [style]="{width: '100%'}" mode="currency" currency="EUR" locale="es-ES"></p-inputNumber>

¿有什么方法可以让它在移动设备上正常工作？ ¿ 有什么方法可以在与此启动组件兼容的移动设备上强制使用数字键盘？

【问题讨论】：

标签： angular mobile progressive-web-apps primeng

【解决方案1】：

您可以访问输入本身并设置类型：

HTML：

<p-inputNumber #input [(ngModel)]="newExpenseAmount" [style]="{width: '100%'}" mode="currency" currency="EUR" locale="es-ES"></p-inputNumber>

类：

@ViewChild('input') public input: InputNumber

public ngAfterViewInit(): void {
    (this.input.input.nativeElement as HTMLElement).setAttribute("type", "tel");
}

【讨论】：

【解决方案2】：

你可以使用 ngx-mask

https://www.npmjs.com/package/ngx-mask.

<input nbInput fullWidth mask="000000000" placeholder="4XXXXXXXX" maxlength="9" />

示例：https://jsdaddy.github.io/ngx-mask-page/main

【讨论】：