没有角度图案的数字键盘答案

【问题标题】：Number keyboard without pattern in angular没有角度图案的数字键盘
【发布时间】：2022-02-10 01:30:09
【问题描述】：

我正在使用NgX-Mask 来屏蔽我的输入框。我想在掩码中包含特殊字符，所以我使用了 NgXMask 中的[dropSpecialCharacters]="false"。

由于角度验证，它显示红色指示符，因为模式不匹配。模式当前使用\d*

<input pattern="\d*" [dropSpecialCharacters]="false" mask="H0:00" placeholder="HH:MM" required
class="form-control" [(ngModel)]="inputValue" name="inputValue" />

验收标准
1 在 Safari 中它应该默认显示数字键盘。 (input pattern="\d*") 默认显示数字键盘。

预期结果
我想在模式中包含“：”字符，以便它显示绿色指示器

StackBlitz Example

支持的应用程序：仅限 iPad

更新此模式将匹配我的输入 ^([0-1][0-9]|[2][0-3]):([0-5][0-9])$
但是我将如何带上数字键盘

【问题讨论】：

标签： html angular regex input ngx-mask

【解决方案1】：

我找到了一个解决我的问题的解决方案。

将regexlib.com 和另一个RexExTool 用于RegEx Helpers。

使用此正则表达式验证我的输入
^([0-1][0-9]|[2][0-3]):([0-5][0-9])$

使用数字输入模式用于 iPad 中的数字键盘。
inputmode="numeric"

 <input inputmode="numeric" pattern="^([0-1][0-9]|[2][0-3]):([0-5][0-9])$"
  [dropSpecialCharacters]="false" mask="H0:00" placeholder="HH:MM" required
  class="form-control" [(ngModel)]="inputValue" name="inputValue" />

StackBlitz Example
1.这个第一个文本框的值和文本键盘无效
2. 第二个文本框，有效输入和数字键盘

【讨论】：