Whenever a user enters a number on a page component, the Virtual Keyboard on their Mobile device pops up and shifts the entire page. I am looking for a solution to either disable the on-screen keyboard or ensure that the text box remains visible even when the keyboard is active. What would be the most effective approach to tackle this issue?
Here is the HTML code for 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>
And here is the TypeScript code 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);
}
}