7

There are multiple questions with answers related to my problem but unfortunately, none worked for me.

I have to detect the enter pressed on android keyboard and change focus from current matInput to next matInput.

I have tried keyup.enter, keydown and keypress but none worked for me. I implemented directive approach but doesn't trigger method when I am debugging app on Android device. Although, it does trigger the method on browser.

Here is what I am using.

HTML:

    <mat-form-field class="ib-input-container-width">
  <input matInput data-dependency="lastName" (keypress)="onChange($event.keyCode)" (keyup.enter)="handleNext('lastName')"  [formControl]="form.get('FirstName')" type="text" >

</mat-form-field>

<mat-form-field class="ib-input-container-width" >
  <input #lastName id="lastName" matInput  [formControl]="form.get('LastName')" type="text">

TS: 

  handleNext(elementId){
    let nextElement = document.getElementById(elementId);
    console.log(nextElement);
    nextElement.focus();
  }

  onChange(event){
    console.log(event.keycode);
  }

PS: I am on a working progressive web app using Cordova.

Update

I have tried solution from https://stackoverflow.com/a/28103608/3081929 But ng-change doesn't work either.

iBug
  • 2,334
  • 3
  • 32
  • 65
  • Have you tried with `keydown` event, and checking what is the key code in TS? – Cristiano Casciotti Sep 26 '19 at 09:58
  • I tried but it doesn't even trigger the method. – iBug Sep 26 '19 at 10:44
  • Hi, have you tried keyup? document.addEventListener('keyup', getInput, false); function getInput(e){ //your code } – Dhananjay Chaudhari Sep 27 '19 at 07:13
  • Tried that too and works perfect in browser but not in android. Method is not triggered. – iBug Sep 27 '19 at 08:10
  • Is the `keyup` event getting triggered when you use it without `enter` like this -> `(keyup)="handleNext('lastName')"`? Also the answer link in your question links to an angularjs solution. Did you try it using the `(change)` or `(input)` events? – nash11 Oct 01 '19 at 10:37
  • Some time ago I made a "next-tab" directive, see https://stackoverflow.com/questions/53690973/change-behaviour-of-enter-key-in-a-phone-angular-5/53691367#53691367 that consist in put in the form `enter-tab` and in each control `#nextTab` and that I used in Android apk. Take a look – Eliseo Oct 06 '19 at 21:27

1 Answers1

2

the code looks correct,

before running your codova app on android make sure you have compiled the angular project using angular cli and output should be set to www folder

Nauman
  • 86
  • 1
  • I was running the app directly, but didn't think about compiling again. Thanks for the suggestion. – iBug Oct 01 '19 at 11:23