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

Question

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

在电脑上，输入法只能输入数字。如果我用键盘按任何字母，该字母将不会写在输入上。一切顺利。

但是，当我使用移动设备（android 和 chrome）时，网络浏览器允许我编写任何其他内容。

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

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

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

Answer 1

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

HTML:

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

Class:

@ViewChild('input') public input: InputNumber

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

Answer 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

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

PrimeNG p-inputNumber with currency does not force input only of numbers using mobile devices

mobile

progressive-web-apps

primeng

angular