CODEWITHSUNDEEP
javascriptjqueryhtmlpastejquery-events
Val Schuman
Val Schuman

Reputation: 1818

jQuery using event.preventDefault() with on('input')

I'm catching paste events with $('selector').on('input', function(event) { ... });

Then I'm trying to test what's been pasted and if it doesn't pass validation, cancel the paste with event.preventDefault(). Unfortunately, by the time the listener function is executed, the text has already been pasted and event.preventDefault() does nothing.

So what's a good way to catch paste events, and if what's been pasted doesn't validate, undo/prevent the paste?

I know I can use .on('paste', function(event) { ... }), but that doesn't give me the text that's been pasted or the contents of the input element after the paste, unless I use setTimeout() with some minute wait time, and I'd like to avoid using setTimeout().

Upvotes: 11

Views: 6089

Answers (4)

L. Monty
L. Monty

Reputation: 882

Using 

$('selector').on('input', function(event) { ... });

and in case the validation does not pass deleting the pasted text seems to work for me.

Sadly accessing the clipboard has some flaws (browser asking if it is allowed to inspect the clipboard, cross browser compatibility, etc.)

If you are okay with saving the last value of the input, the pasted text can be calculated anyway.

Here is my approach for calculating the pasted text

https://jsfiddle.net/f710o9qd/2/

I hope this helps you :)

(Feel free to refine the calculation of the pasted text if you find any flaws)

Upvotes: 0

antanta
antanta

Reputation: 740

First of all some background on event trigger order for the input element:

keydown -> keypress -> paste -> input -> keyup -> change

Whenever you call preventDefault it stops the chains, like nothing happened.

So my suggestion is to catch the paste event, prevent its default behavior and do your logic there.

I know I can use .on('paste', function(event) { ... }), but that doesn't give me the text that's been pasted or the contents of the input element after the paste

Actually you can retrieve the content of the clipboard. See this doc. Support is all major browser (but only IE11+). I do not know if by the time of the writing of the question this functionality was available or not.

Fiddle example

$('#myInput').on('paste', function(e) {
    // Cancel the event - this prevents the text from being entered into the input and stops the event chain
    e.preventDefault();

    // Get the content of the clipboard
    let paste = (event.clipboardData || window.clipboardData).getData('text');

    // Validate what it is pasted       
    if (paste == "text to paste") {
        // If condition is satisfied manually set the value of the input
        $(this)
            .val(paste)
            // Manually trigger events if you want
            .trigger('input')
            .trigger('change');
    }
});

Notes on the code:

  • This solution does not include setTimeout. Whenever you make it with setTimeout you see for a very short time the text being pasted, like a blinking effect.
  • If text meets condition I manually set it in the input. However this does not trigger input and change events. If you need them, just manually trigger them
  • Similar approach is to first check the text and if it does not meet requirements then call preventDefault, otherwise do nothing. This way you avoid manually setting value in the input and triggering events afterward.

Upvotes: 2

Cheezy Code
Cheezy Code

Reputation: 1715

Try using .change event of jquery.

Set value to blank if value doesn't satisfy your condition.

Upvotes: 0

Haroon
Haroon

Reputation: 111

My understanding from the question is, we must not allow any data to be pasted inside the text box until and unless it pass a specific validation. Instead of using event.preventDefault(), we can capture the value when user input any content, using on('input') listener and validate it against the specific condition and if the validation gets failed, empty the text box value.

(This is the workaround if we still need to use on('input') event listener)

Sample Code (I am using console.log() for printing the pasted value):

HTML:

<input type='text' id="selector" />

JS:

$(document).ready(function() {
 $('#selector').on('input', function (e){
        if(e.target.value !== "myValue"){
        $('#selector').val('');
    }
    else{
        console.log(e.target.value);
    }
 });
});

Upvotes: -1

Related Questions