jQuery: keyup event for mobile device

Question

I'm having a few issues getting a keyup event to fire on my iPhone, my code is as follows:

        var passwordArray = ["word", "test", "hello", "another", "here"];

        var test = document.getElementById('enter-password');
        test.addEventListener('keyup', function(e) {

            if (jQuery.inArray(this.value, passwordArray) != -1) {
                alert("THIS IS WORKING");
            } else {}

        });

The idea being that as the user is typing into the #enter-password field, as and when they've matched a word in the passwordArray the alert will fire. This works on desktop, e.g. once you've entered word the function will fire straight away as soon as you've typed the d. Is there anyway to get this to work for mobile too?

Answer 1

You can add input event. It is an event that triggers whenever the input changes. Input works both on desktop as well as mobile phones

test.on('keyup input', function(){
  //code
});

You can check this answer for more details on jQuery Input Event

Answer 2

There are three events you can use (but you have to be careful on how you "combine" them):

• keyup : it works on devices with a keyboard, it's triggered when you release a key (any key, even keys that don't show anything on the screen, like ALT or CTRL);

• touchend: it works on touchscreen devices, it's triggered when you remove your finger/pen from the display;

• input: it's triggered when you press a key "and the input changes" (if you press keys like ALT or CTRL this event is not fired).

The input event works on keyboard devices and with touchscreen devices, it's important to point this out because in the accepted answer the example is correct but approximative:

test.on('keyup input', function(){
}

On keyboard based devices, this function is called twice because both the events keyup and input will be fired.

The correct answer should be:

test.on('keyup touchend', function(){
}

(the function is called on keyup for desktops/laptops OR on touchend for mobiles)

or you can just simply use

test.on('input', function(){
}

but remember that the input event will not be triggered by all keys (CTRL, ALT & co. will not fire the event).

Answer 3

The touchend event is fired when a touch point is removed from the device.

https://developer.mozilla.org/en-US/docs/Web/Events/touchend

You can pass keyup and touchend events into the .on() jQuery method (instead of the keyup() method) to trigger your code on both of these events.

test.on('keyup touchend', function(){
//code
});

Answer 4

You should add a input event. It works on both mobile and computer devices.