PrimeNG、InputOtp -- 当 InputOtp 具有 [integerOnly]="true" 时数字键盘不工作

Answer 1

<div class="card flex justify-content-center">
    <p-inputOtp [(ngModel)]="value" [integerOnly]="true" (keydown)="onKeyDown($event)"></p-inputOtp>
</div>

在您的组件类中：

import { Component } from '@angular/core';

@Component({
    selector: 'input-otp-integer-only-demo',
    templateUrl: './input-otp-integer-only-demo.html'
})
export class InputOtpIntegerOnlyDemo {
    value: any;

    onKeyDown(event: KeyboardEvent) {
        // Allow only numeric keypad inputs
        if (
            (event.key === '0' || event.key === '1' || event.key === '2' ||
            event.key === '3' || event.key === '4' || event.key === '5' ||
            event.key === '6' || event.key === '7' || event.key === '8' ||
            event.key === '9' || event.key === 'Tab' || event.key === 'Backspace' ||
            event.key === 'Delete' || event.key === 'ArrowLeft' || event.key === 'ArrowRight') &&
            !event.ctrlKey && !event.altKey && !event.metaKey
        ) {
            // Allow the key press
            return;
        }

        // Prevent the default behavior for other keys
        event.preventDefault();
    }
}