html - 页面在移动 View ( Angular )中打开 NumPad 而不是文本键盘

Question

我有一个 Angular 应用程序和电子邮件字段(文本字段)——在移动 View 中打开一个键盘，但不确定为什么。

<form (ngSubmit)="onSubmit()" #emailForm="ngForm">
                <div class="emailaddress" style="text-align:center;" *ngIf="!showEmail">
                    <div style="font-size: 20px; display: inline-block;">
                        My email address is:
                    </div>   
                    <div style="display: inline-block;">
                        <label for="emailAddress" class="visually-hidden">My email address is</label>
                        <input name="emailAddress" id="emailAddress" type="tel" maxlength="50" placeholder="sample@email.com" [(ngModel)]="emailClass.emailAddress" pattern="([A-Za-z0-9-!#$%&_+`{}|']+)?(\.[A-Za-z0-9-!#$%&_+`{}|']+)*@[A-Za-z0-9-]+\.([A-Za-z0-9]{2,})+" aria-required="true" required/>
                    </div>
                    <div style="margin-bottom: 0px; margin-top: 20px;" class="error-generic" *ngIf="emailForm.touched && (emailForm.form.controls['emailAddress'].invalid && emailForm.form.controls['emailAddress'].touched)">
                        <svg height="32" viewBox="0 0 32 32" width="32"><path d="..." fill="#6d6e71"></path></svg>
                        Correct the email field to continue.
                    </div>
                    <div style="margin-top: 20px;">
                        <button id="email-me" class="button large" [disabled]="!emailForm.form.valid">Send Email</button>
                    </div>
                </div>
            </form>

Answer 1

将输入类型更改为“电子邮件”。

<input name="emailAddress" id="emailAddress" type="email" maxlength="50" placeholder="sample@email.com" [(ngModel)]="emailClass.emailAddress" pattern="([A-Za-z0-9-!#$%&_+`{}|']+)?(\.[A-Za-z0-9-!#$%&_+`{}|']+)*@[A-Za-z0-9-]+\.([A-Za-z0-9]{2,})+" aria-required="true" required/>

< input type="tel"> 定义了一个用于输入电话号码的字段。