Is there a way to disable the Virtual Keyboard automatically popping up on Mobiles?

I have a page component that asks a user to enter a number, however when they scroll to this page on a Mobile, the Virtual Keyboard on the mobile pops up and pushes the entire page up.

I want to either disable the On screen keyboard or keep the text box in view whilst the keyboard is active, what is the best way to do this?

HTML of the text box:

<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 for the Input box:

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);
}
}

Continue reading...