I have a jQuery app with an input text field that has events bound to it such that if the user changes the field then other related fields get updated accordingly. My goal is to make the other fields responsive to every character change. I initially bound the keyup event to the field which works pretty well on a desktop browser:
This seemed perfect.
I noticed, however, when testing on a mobile browser, that if the user presses with their finger in the field and selects paste, the keyup event is not triggered. This isn't surprising since a keyboard isn't being used on the mobile interface. So I additionally bound change to the field. That worked OK, but the user still has to "deselect" the field after pasting for the change event to be triggered. While playing around with things, I noticed that even on the desktop, if the user pastes to the field with the mouse (right click > paste), then no events are triggered until the field is unselected.
Again, my goal is to make the field more responsive than this for these use cases (mouse paste and mobile paste to the field). Is there a keyboardless event I can bind to that will trigger when the user pastes to the field before deselecting the field?
Thanks.
The input event is what I want. I find that I can change from binding on keyup change to input and the field is responsive to any change to the field, either via keyboard, changes via the mouse, or touch screen events. Thus:
$("#id_name").on('input', function() {
// Respond to the change in the field.
});