angular 中没有图案的数字键盘

Question

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

由于 angular 验证，它显示红色指示器作为模式不匹配。当前使用的模式 \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])$
但是我怎么带数字键盘

Answer 1

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

用于 regexlib.com and another RexExTool 正则表达式助手。

使用这个正则表达式来验证我的输入
^([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. 第二个文本框有效输入和数字键盘

angular 中没有图案的数字键盘

Number keyboard without pattern in angular

html

angular

regex

input

ngx-mask