CODEWITHSUNDEEP
javascriptangularionic-frameworkcapacitor
Felix Olszewski
Felix Olszewski

Reputation: 798

Ionic Capacitor (Angular): how to prevent closing of keyboard after "submit" with enter key

In Ionic Capacitor (I am using Angular): How do I keep displaying the keyboard open, prevent it from closing, when the user submits the form or input?

I know there are questions like this one on StackOverflow, but they refer to Ionic Cordova and not Ionic Capacitor.

I want this to work on native IOS/Android, I don't care about PWA. (and dont care about Desktop-Web of course, since it doesnt even have a keyboard on the screen).

Upvotes: 0

Views: 1066

Answers (4)

Manish
Manish

Reputation: 26

This prevents mobile browsers from blurring the input when the components like ion-button button is activated/pressed.

<ion-button
...
..
onPointerDown={(ev) => {ev.preventDefault();}}
...
</ion-button>

Upvotes: 0

behicsakar
behicsakar

Reputation: 207

This behavior is typically controlled by the mobile operating system and not the web application.

You might want to manually control the keyboard visibility using the Capacitor Keyboard API. Here's an example of how you can keep the keyboard open:

import { Keyboard } from '@capacitor/keyboard';

// After form submit
Keyboard.setAccessoryBarVisible({ isVisible: true });

Upvotes: 0

Khambat
Khambat

Reputation: 1

This code should keep the keyboard open and maintain focus on the IonTextarea when you submit the form

@ViewChild('textarea') private readonly textarea: IonTextarea;


onSubmit(ev) {
  this.textarea.setFocus();
}

Upvotes: 0

Wilt
Wilt

Reputation: 44393

Did you try event.preventDefault() and/or returning false from your submit handler function? These are usually the "tricks" to prevent such things (like keyboard closing) from happening.

Upvotes: 1

Related Questions