Detect which key pressed on mobile keyboard

ionic-v1
1

Hi there,

In my app I need the user to enter 3 of his 6-digit PIN code in order to log in. To do so I display 3 little 1-character input fields among hashtag icon that represent the 3 other pin digits.

Something like:

 [_]  #  [_]  [_]  #  #

(sorry, couldn’t upload a proper picture)

What I want to achieve is, when the user enters a number, and ONLY a number, the first field is populated and the focus jumps automatically to the next field.

I created a attribute directive for my input fields and inside it I run a function to do the job, let’s call it myFunction. So, on my input fields, I have a

ng-keyUp="myFunction($event)".

For now, I only want to test the event detection, so what I did is creating a scope.whichKey that I set equal to event.which. Then on my html page I output it: {{whichKey}}. I do so instead of console.log in order to easily test out on a mobile phone.

So running that app on the chrome simulator works fine, on every input I get a code corresponding to the pressed key.

BUT, on the mobile, it doesn’t work. I get either 0 for every key pressed, or 13 when pressing Go key (tested on Android).

Why that, and is there a workaround or another solution?

Cheers for reading.

2

I woul use ng-changed and validate entered value istead of listen on key events.

What do you think.

3

Hi BoiPhoton, and thanks for your answer.

ng-change is a good thought, but the problem is, I need to know which input has been changed, in order to jump the focus to the following one. The ng-change don’t seem to allow to pass in any value, or am I missing something?

Another possibility would be a stacked if loop to test every of my 6 variable [pin1, pin2…pin6] and see if one of them has been changed. Is there such a thing in angular?

4

Up? Any help, please?

5

You could create a custom directive, provide ths items id over lats say id attribute and in the Link function of the directive you have attributes an element given.

Look here.

6

Thanks you BioPhoton, this look interesting, I’m gonna have a good look at it.
Cheers