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

Question

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().

`event.preventDefault()` prevents the default action, and when binding to the `input` event, it does'nt really prevent you from typing or pasting anything in an input? When caching the value from pasted content, you'll have to defer it to get a value, but not "some minute", set the timeout to zero, and it should still work. — adeneo, Mar 03 '13 at 03:28
I guess it's ok if to set `100ms` timeout to capture the value of a input on paste and validate rather than a `minute`. — SRy, Mar 03 '13 at 03:30
You'd just do something like this [**FIDDLE**](http://jsfiddle.net/adeneo/HeGgx/) ? — adeneo, Mar 03 '13 at 03:34
@adeneo The reason I'm averse to using setTimeout is because, as I understand, OS process scheduler may decide to give priorities to processes in such a way that the setTimeout function may be executed before the input element is updated with the pasted content. Though, I realize I may be completely wrong on this... — Val Schuman, Mar 03 '13 at 04:24

score 2 · Answer 1 · answered Sep 12 '19 at 11:33

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.

even though the event order is correct the 'change' will only bubble when the input looses its focus (immediately before blur). Also notice preventDefault won't stop the event chain - if you mean the event bubbling by it. If you want to achieve this you also need to call stopPropagation. (see https://www.w3schools.com/jsref/event_preventdefault.asp ) — L. Monty, Oct 03 '19 at 00:47
i believe `onpaste` is experimental and even in Chrome 86 you seemingly cannot retrieve the input data from the event object — oldboy, Nov 09 '20 at 04:37

score 0 · Answer 2 · answered May 10 '16 at 16:53

0

Try using .change event of jquery.

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

answered May 10 '16 at 16:53

Cheezy Code

1,685
1
14
18

change-event will bubble very late (only after the input looses its focus) – L. Monty Oct 03 '19 at 00:50

score 0 · Answer 3 · answered Oct 03 '19 at 00:17

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)

The fiddle also applies the validation when some text is written rather than pasted. I hope this is what you intended. — L. Monty, Oct 03 '19 at 00:33

score -1 · Answer 4 · edited May 10 '16 at 16:09

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

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

4 Answers4