CODEWITHSUNDEEP
ionic-frameworkionic3
core114
core114

Reputation: 5325

Ionic input field does not move to next field automatically

Im using ionic 3 for my mobile application, I have some issues with my input fields which do not move automatically to the next field. For example when I click the first input filed and fill the first one, the cursor does not move to the next field. How to do that correctly?

 <ion-grid>
      <ion-row>
        <ion-col>
          <ion-item >
            <ion-input type="tel" placeholder="*" maxlength="1" tabindex="1"   ></ion-input>
          </ion-item>
        </ion-col>
        <ion-col >
          <ion-item>
            <ion-input type="tel" placeholder="*" maxlength="1"  tabindex="2"  ></ion-input>
          </ion-item>
        </ion-col>
        <ion-col >
          <ion-item>
            <ion-input type="tel" placeholder="*" maxlength="1"  tabindex="3"  ></ion-input>
          </ion-item>
        </ion-col>
        <ion-col >
          <ion-item>
            <ion-input type="tel" placeholder="*" maxlength="1"  tabindex="4"   ></ion-input>
          </ion-item>
        </ion-col>
      </ion-row>

    </ion-grid>

Upvotes: 11

Views: 12422

Answers (4)

Fkhan
Fkhan

Reputation: 286

You can use the following approach, there could be better approaches i'm just sharing what i know.

What i am doing here is setting a reference of the next element (eg: #b), and on keyup event i am passing that reference to my function in .ts file which only calls the .setFocus() on the referenced element.

    <ion-grid>
      <ion-row>
        <ion-col>
          <ion-item >
            <ion-input type="tel" placeholder="*" maxlength="1" tabindex="1" (keyup)="moveFocus(b)"  ></ion-input>
          </ion-item>
        </ion-col>
        <ion-col >
          <ion-item>
            <ion-input type="tel" placeholder="*" maxlength="1"  tabindex="2" #b (keyup)="moveFocus(c)"  ></ion-input>
          </ion-item>
        </ion-col>
        <ion-col >
          <ion-item>
            <ion-input type="tel" placeholder="*" maxlength="1"  tabindex="3" #c (keyup)="moveFocus(d)"  ></ion-input>
          </ion-item>
        </ion-col>
        <ion-col >
          <ion-item>
            <ion-input type="tel" placeholder="*" maxlength="1"  tabindex="4" #d  ></ion-input>
          </ion-item>
        </ion-col>
      </ion-row>

    </ion-grid>

.ts:

import { Component } from '@angular/core';

        @Component({
          selector: 'page-home',
          templateUrl: 'home.html'
        })
        export class HomePage {

          constructor() {

          }

          moveFocus(nextElement) {
            nextElement.focus();
          }

        }

Upvotes: 15

Mandeep Singh
Mandeep Singh

Reputation: 905

Adding "scrollAssist: true" and "autoFocusAssist: true" to app.module in the @ngModule would solve this problem.

imports: [
    IonicModule.forRoot(MyApp, {
        scrollAssist: true,
        autoFocusAssist: true
    })
],

Upvotes: 0

Tummala Krishna Kishore
Tummala Krishna Kishore

Reputation: 8271

This can be achieved by using the nextElementSibling , you can use the Keyup event to achieve this , here is the Pseudo code

Add keyup event to the event fields as follows (keyup)="keytab($event)"

keytab(event){
    let element = event.srcElement.nextElementSibling; // get the sibling element

    if(element == null)  // check if its null
        return;
    else
        element.focus();   // focus if not null
}

In order to make it more clear manner you can create a directive also as follows

tabindex.directive.ts:

import { Directive, HostListener, Input } from '@angular/core';
import { TextInput } from 'ionic-angular';

@Directive({
    selector: '[yourTabindex]'
})
export class TabindexDirective {

    constructor(private inputRef: TextInput) { }

    @HostListener('keydown', ['$event']) onInputChange(e) {
        var code = e.keyCode || e.which;

        if (code === 13) {
            e.preventDefault();
            this.inputRef.focusNext();
        }
    }
}

Don't forget to include this directive in Modules page and you can use it on your input fields as follows ,as a sample:

<ion-input type="tel" placeholder="*" maxlength="1" tabindex="1" yourTabindex   ></ion-input>

Upvotes: 0

Ivas
Ivas

Reputation: 311

You can try something with the (keyup) or (keydown) events. There is also documentation available on the angular docs that talks about forms and user Input.

HTML

<input (keyup)="onKey($event)">

.ts

onKey(event) {
  if (event.key === "Enter") {
    console.log(event);
  }

}

Upvotes: 0

Related Questions