使用货币的PrimeNG p-inputNumber不会强制只使用移动设备输入数字

Question

Im使用PrimeNG的<p-inputNumber>标记。

在计算机视图中，输入仅允许输入数字。如果我用键盘按下任何一个字母，这个字母都不会写在输入上。一切都好。

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

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

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

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

Answer 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");
}

Answer 2

您可以使用ngx掩码

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

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

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