Use enter key to go to next inputfield


#1

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();
  }
}

#2

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.


#3

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.


#4

TalkBack helps vision-impaired people on Android.


#5

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.


#6

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