Jquery Mobile Paste event on input text

Question

I'm using Jquery Mobile to develop an web app for Android and iPhone. I want to handle the event when the users change their value in the input text field.

Initially, I use .on("keyup change") and everything seem to work ok. However, when the users paste some text on the text field (by holding and tap on the "Paste"), my event handler is not called.

Please help me if you know how to solve this problem.

Thank you all.

Answer 1

1. For Android add a timeout as it is in this example http://ajax911.com/numbers-numeric-field-jquery/

2. For iPad add event 'change' together with paste, worked on iphone

Answer 2

Works on all browsers but not on FireFox.

Demo

$('input').on('paste', function (e) {
 if (e.originalEvent.clipboardData) {
  var text = e.originalEvent.clipboardData.getData("text/plain");
  $('p').empty();
  $('p').append(text);
 }
});

Credit goes to: jQuery Detect Paste Event Anywhere on Page and "Redirect" it to Textarea

Answer 3

Here is what worked for me on mobile Safari and Chrome.

if (document.getElementById('search_input')) {
    document.querySelector('#search_input').addEventListener('paste', (e) => {

        let pasteData = (e.clipboardData || window.clipboardData).getData('text');
        pasteData = pasteData.replace(/[^\x20-\xFF]/gi, '');
        window.setTimeout(() => {
            //do stuff
        });
    });
}