2

Eu estava tentando fazer uma validação porém com o .on('input') ele funciona melhor do que o .on('paste') (eu precisei colocar um timeout para que ele funcionar), alguém pode me explicar a diferença entre os dois? Segue o meu código para ilustrar a pergunta:

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

3 Respostas 3

5

O evento input é mais genérico e dispara por exemplo com paste ou eventos de teclado. O paste é mais específico e não dispara quando escreves com o teclado.

O paste irá disparar primeiro e depois o input.

Outro evento genérico é o change, que funciona como o input basicamente mas não dispara logo. Por vezes só quando o input perde o foco.

Podes testar aqui:

$('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>
<input type="text" />

1
  • A quem deu o -1 convido a motivar para perceber o que pode estar errado na minha resposta.
    – Sergio
    Commented 25/08/2017 às 15:02
1

Então a diferença é simples o on-input só é chamado quando introduzes algum valor, e o on-paste só será chamando ao colares um valor ctrl + v

Da uma olhada neste exemplo básico:

$('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>
<input type="text" />

0

A diferença básica é que o oninput é disparado sempre que o usuário entra com qualquer valor no campo, enquanto que o onpaste é apenas quando o usuário "cola" alguma informação.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .