angular - 有没有办法在手机上自动禁用虚拟键盘弹出？

我有一个页面组件，要求用户输入一个数字，但是当他们在手机上滚动到这个页面时，手机的虚拟键盘会弹出并把整个页面向上推。

我想要么禁用屏幕键盘，要么在键盘激活时保持文本框可见，最好的方法是什么？

文本框的 HTML：

<div class="text-box-center" fxLayoutAlign="center ">
            <input readonly  #inputText (focusout)="setInputRange()" (keyup)="validateInputRange($event)"
                   [(ngModel)]="textFieldValue" [attr.aria-label]="textFieldValue + ' ' + inputRange.labelText"
                   [attr.id]="'inputField'+selectedQuestion"
                   class="pam-simple-button input-wellness-one"
                   required type="number">
          </div>

输入框的 Typescript：

 setInputRange(): void {
    if (this.textFieldValue !== null && typeof this.textFieldValue === 'number' && !isNaN(this.textFieldValue)) {
      this.inputRange.val = this.textFieldValue;
      this.question.question = this.inputRange;
    }
  }

  validateInputRange(event: KeyboardEvent): void {
    if (this.textFieldValue !== null && typeof this.textFieldValue === 'number' && !isNaN(this.textFieldValue)) {
      this.question.question = this.inputRange;
      this.isAnyAnswerSelected.emit(1);
      if (event.code === pamLifeKeys.ENTER_KEY) {
        this.isEnterKeyUp.emit(true);
      }
    } else {
      this.isAnyAnswerSelected.emit(null);
    }
  }

答案＃1

如 MDN 文档 中所述：

inputmode 全局属性是一个枚举属性，它提示在编辑元素或其内容时用户可能输入的数据类型。这允许浏览器显示合适的虚拟键盘。

使用 inputmode=none 属性隐藏虚拟键盘

<input type="text" inputmode="none" />

答案＃2

您可以使用 inputmode="none" 或 virtualkeyboardpolicy="manual" 来禁用虚拟键盘的弹出。您可能希望按需显示键盘，并且可能希望它是数字键盘或电子邮件键盘，因此您可以同时使用这两个属性。

例如：

<input type="text" inputmode="numeric" virtualkeyboardpolicy="manual">

将禁用自动弹出，但在需要时为您提供数字键盘（或任何其他选项键盘）。有关更多详细信息，请参阅 inputmode 和 virtualkeyboardpolicy。