Use enter key to go to next inputfield

Hello,

I have a form but want to use the enter key on his keyboard to go to the next field.
Can anyone help me?

The current code I have is this:

HTML


<ion-header>

  <ion-navbar hideBackButton="true">
    <ion-title>Add Item</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <form #f="ngForm" (ngSubmit)="onAdd(f)">
    <ion-list>
      <ion-item>
        <ion-label floating>Name</ion-label>
        <ion-input type="text" [(ngModel)]=itemForm.name name="name" required></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>Category</ion-label>
        <ion-input type="text" [(ngModel)]=itemForm.category name="category" required></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>Enter a description</ion-label>
        <ion-textarea [(ngModel)]=itemForm.description name="description" fz-elastic></ion-textarea>
      </ion-item>
    </ion-list>
    <ion-row>
      <ion-col>
        <button ion-button block type="submit" [disabled]="!f.valid">Add item</button>
      </ion-col>
      <ion-col>
        <button ion-button block type="button" (click)="onCancel()">Cancel</button>
      </ion-col>
    </ion-row>
  </form>
</ion-content>

TYPESCRIPT

import { ItemService } from './../../services/Item';
import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import { ElasticModule } from 'angular2-elastic';
import { NgForm } from "@angular/forms"

@IonicPage()
@Component({
  selector: 'page-new-item',
  templateUrl: 'new-item.html',
})
export class NewItemPage {
  itemForm = {
    name: '',
    category: '',
    description: ''
  };

  constructor(
    private navCtrl: NavController,
    private itemService: ItemService
  ) {}

  onAdd(form: NgForm) {
    this.itemService.addItem(form.value.name, form.value.category, form.value.description);
    this.navCtrl.popToRoot();
  }

  onCancel() {
    this.navCtrl.popToRoot();
  }
}

I would urge you to reconsider this. It is contrary to the HTML specification on implicit submission and will conflict with people using accessibility assistance technology.

I’m only planning to release the app on android only so not on the web or desktop. So the problems with submission and accessibility assistance shouldn’t be there.

TalkBack helps vision-impaired people on Android.

Okay, I understand the importance of it.
But I still want to know how I can do it. Maybe I can implement something in the settingspage that can enable/disable ‘press enter to go to the next input field’. But for that I still need to know how to make it happen to implement such a function.

This will help you https://stackoverflow.com/questions/40730477/how-to-handle-go-enter-keyboard-button-ionic2-ion-input

@nyffellare
First of all:

  1. Use ‘#’ all the elements in the html
    like this
    <ion-input #Field1 (keyup)="gotoNextField(Field2)" </ion-input>
    <ion-input #Field2 (keyup)="gotoNextField(Field3)" </ion-input>
    <ion-input #Field3 (keyup)="gotoNextField(Field4)" </ion-input>
    <ion-input #Field4 (keyup)="finishFunction()" </ion-input>
  2. use this function
    in the .ts
  gotoNextField(nextElement)
        nextElement.setFocus();
    }
1 Like