Use enter key to go to next inputfield


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:



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


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


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"

  selector: 'page-new-item',
  templateUrl: 'new-item.html',
export class NewItemPage {
  itemForm = {
    name: '',
    category: '',
    description: ''

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

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

  onCancel() {

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

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
1 Like