CODEWITHSUNDEEP
jquery-mobileonpaste
VinhBS
VinhBS

Reputation: 677

Jquery Mobile Paste event on input text

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.

Upvotes: 2

Views: 5950

Answers (3)

Filix Mogilevsky
Filix Mogilevsky

Reputation: 777

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
        });
    });
}

Upvotes: 0

Dima
Dima

Reputation: 1065

  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

Upvotes: 0

Omar
Omar

Reputation: 31732

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

Upvotes: 3

Related Questions