CODEWITHSUNDEEP
iosangularcordovaionic-frameworkionic3
Spanchal
Spanchal

Reputation: 495

(keyup.enter) event not working in iOS keypad

I have developed the app in the ionic framework + angular, and for some functionality I have bind (keyup.enter) event with input. but somehow it is not working in the iOS device latest version. but working fine with the older version of iOS device like (OS 12.5.4).

please help me out from this issue.

Ionic Information enter image description here

semple source code

<ion-input placeholder="Lot Code" [(ngModel)]="txtLotCode" (keyup.enter)="searchItemLotWS()" type="text"> </ion-input>

Reference Image

enter image description here

Upvotes: 5

Views: 4798

Answers (4)

Toni Hoffmann
Toni Hoffmann

Reputation: 21

Even though this is already two years old I had the same issue with an Angular 14.3 Application and iOS 17.5 clients (iPad and iPhone).

In my case it worked to not listen to keyup.enter but to any keyup and check the key in the typescript.

So I went from a code that looked like

<input class="form-control" [(ngModel)]="searchQuery" (keyup.enter)="search()" [disabled]="loading" />

to something like this

public keyup(e: KeyboardEvent) {
    if (e.key == 'Enter') {
      this.search();
    }
  }
<input class="form-control" [(ngModel)]="searchQuery" (keyup)="keyup($event)" [disabled]="loading" />

Maybe this helps anyone.

Upvotes: 0

Bharat Rawat
Bharat Rawat

Reputation: 199

The issue is, from iOS version 13 onwards, iPhone keyboard ⇧(Shift/Capitalize) button is auto activated hence pressed key becomes Shift+Enter.

I won't recommend using (keydown.enter) because if user keep the enter key pressed it will keep executing the code.

Instead, you can use autocapitalize attribute: <ion-input **autocapitalize="none"** placeholder="Lot Code" [(ngModel)]="txtLotCode" (keyup.enter)="searchItemLotWS()" type="text"> </ion-input>.

and

Since, you are using ionic framework, instead of using ion-input you can use <ion-searchbar (search)="searchItemLotWS()"></ion-searchbar> that works with enter and shift+enter.

Upvotes: 3

Spanchal
Spanchal

Reputation: 495

I have replaced (keyup.enter) event with (keydown.enter) and it works for me, now "return" button is worked for me in the latest iOS (ios 14).

thanks.

Upvotes: 3

Emre Akbaki
Emre Akbaki

Reputation: 276

what did you try? Can you show the code for us. I try bellow sample and it work.

For html

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

For ts

gotoNextField(nextElement)
  nextElement.setFocus();
}

Upvotes: -1

Related Questions