What is the difference between .on ('input') / .on ('paste') / .on ('change')?

Question

What is the difference between .on ('input') / .on ('paste') / .on ('change')?

Navigation

#1 by (5 votes)
#2 by (1 votes)
#3 by (0 votes)

2

I was trying to do a validation but with .on ('input') it works better than .on ('paste') a timeout for it to work), can someone explain the difference between the two? Here is my code to illustrate the question:

paste

$(this).on("paste", "#email", function(event) {
        var $obj = $(this);
            setTimeout(function() {
                var str  = $obj.val();
                $obj.val(str.replace(/[^a-za-uA-ZA-U0-9_@\.\'\b\t]/g, ''));
            }, 2);
        });

input

$(this).on("input", "#email", function(event) {
        var $obj = $(this);
                var str  = $obj.val();
                $obj.val(str.replace(/[^a-za-uA-ZA-U0-9_@\.\'\b\t]/g, ''));
        });

change

 $(this).on("change", "#email", function(event) {
            var $obj = $(this);
                    var str  = $obj.val();
                    $obj.val(str.replace(/[^a-za-uA-ZA-U0-9_@\.\'\b\t]/g, ''));
            });

javascript jquery

asked by anonymous 25.08.2017 / 16:56

3 answers

1

Then the difference is simple the on-input is only called when you enter some value, and the on-paste will only be calling the collars a value ctrl + v / p>

Take a look at this basic example:

$('input').on('change', function() {
  console.log('change ' + this.value);
});

$('input').on('input', function() {
  console.log('input ' + this.value);
});

$('input').on('paste', function() {
  console.log('paste ' + this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text" />

25.08.2017 / 17:09

0

The basic difference is that oninput is fired each time the user logs in with any value in the field, whereas onpaste is only when the user "glue" some information.

25.08.2017 / 17:02

Inequality in C language Pure Javascript Portfolio Filter

score 5 · Accepted Answer

The input event is more generic and triggers for example with paste or keyboard events. paste is more specific and will not fire when typing with the keyboard.

The paste will fire first and then input .

Another generic event is change , which acts as the input basically but does not fire soon. Sometimes only when input loses focus.

You can test here:

$('input').on('change paste keyup input', function(e) {
  console.log(e.type, this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text" />