Android/iOS device keyboard go to next/previous form-input

Ionic Framework ionic-v3
#1

Hello there,
I’ve been searching for a solution for a while but I can’t figure out how to make the ionic app displaying the next/previous buttons and text suggestions on device keyboard.

I’m using Ionic version 3.8.1 and I’m testing the app currently on an iPad 4 with iOS 10.3.3. I’ve tried adding tabindex to all form-inputs and calling Keyboard.hideKeyboardAccessoryBar(false) method but the buttons never appeared.

The keyboard in my app looks like this:
keyboard2

But it should look like this:
keyboard1

If anyone can help me i would be very grateful.

PS: My form looks like this:

<form #addEditForm="ngForm" (ngSubmit)="save()">
    <input type="submit" class="hideElement"/>
    <ion-item>
      <ion-label stacked translate>DISPLAY_NAME</ion-label>
      <ion-input type="text" name="displayName" [(ngModel)]="device.DisplayName" required clearInput></ion-input>
    </ion-item>
    <ion-item>
      <ion-label stacked translate>HOST</ion-label>
      <ion-input type="text" name="host" [(ngModel)]="device.Host" required host clearInput></ion-input>
    </ion-item>
    <ion-item>
      <ion-label stacked translate>PORT</ion-label>
      <ion-input type="number" min="0" max="65535" name="port" [(ngModel)]="device.Port" required clearInput></ion-input>
    </ion-item>
    <ion-item>
      <ion-label stacked translate>PASSWORD</ion-label>
      <ion-input type="password" name="password" [(ngModel)]="device.Password" required clearInput></ion-input>
    </ion-item>
    <ion-item>
      <ion-label translate>DEFAULT</ion-label>
      <ion-toggle name="default" [(ngModel)]="device.Default"></ion-toggle>
    </ion-item>
  </form>
#2

Hello again,

I got it working now. To show the buttons it’s necessary to call keyboard.hideKeyboardAccessoryBar(false). I’ve tried it but it doesn’t work in ionViewDidLoad:

ionViewDidLoad() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.keyboard.hideKeyboardAccessoryBar(false);
    });
  }

When I call it in ngOnInit instead, it works:

ngOnInit() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.keyboard.hideKeyboardAccessoryBar(false);
    });
  }

And for autocomplete and autocorrect I have to add the directives autocomplete and autocorrect to ion-input.

PS: ionViewDidLoad never gets called on app.component.ts

HideKeyboardAccessoryBar not showing Done button
#3

Hi Thilo1992,

Thank you for sharing this solution. I tried to add ngOnInit into the app.component.ts of my ionic 3 project, but it doesn’t work. Could you pleaes share your app.component.ts here?

Thanks in advance!!

#4

Are you sure your App Component class is not missing ‘implements OnInit’ ? If that’s the case, your ngOnInit function is just a common class function and not the one that will be executed once the component initializes