PrimeNG p-inputOtp组件填完所有框后无法修改值的解决方法

问题分析 #

当p-inputOtp的所有输入框填满后，点击输入框无法直接修改内容，必须通过删除键清空后才能重新输入，这是因为组件默认未开启点击输入框时选中已有内容的功能，导致新输入的内容无法覆盖原有值。

解决方案 #

给p-inputOtp组件添加[selectOnFocus]="true"属性，点击任意已填满的输入框时，会自动选中框内的内容，此时直接输入新值就能覆盖原有内容，无需先删除。

修改后的代码：

<p-inputOtp
class="mt-2 gap-6"
[(ngModel)]="value"
name="otp"
[integerOnly]="true"
[autofocus]="true"
[selectOnFocus]="true"
></p-inputOtp>

补充排查点 #

如果设置后仍有异常，可以检查：

• 确认PrimeNG版本为最新稳定版，旧版本可能存在组件交互bug
• 排查是否有自定义CSS/JS代码干扰了输入框的焦点选中行为

内容的提问来源于stack exchange，提问作者Adam