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

Question

I catch insert events with $('selector').on('input', function(event) { ... });

Then I try to check what was inserted, and if it fails, cancel the insert using event.preventDefault() . Unfortunately, by the time the listener function is complete, the text is already inserted and event.preventDefault() does nothing.

So, what is a good way to catch insert events, and if what was inserted does not check, cancel / prevent insertion?

I know that I can use .on('paste', function(event) { ... }) , but this does not give me the text that was inserted, or the contents of the input element after pasting, unless I use setTimeout() with by some minute wait time, d would like to avoid using setTimeout() .

Answer 1

Try using the .change jquery event.

Set the value to empty if the value does not satisfy your condition.

Answer 2

First of all, some information about the event trigger order for the input element:

key press → key press → insert → enter → key press → change

Whenever you call preventDefault , it stops the chain as if nothing had happened.

Therefore, I propose to intercept the insert event, prevent its default behavior, and execute its logic there.

I know that I can use .on ('paste', function (event) {...}), but this does not give me the text that was inserted or the content of the input element after insertion

In fact, you can get the contents of the clipboard. See this document . Support for all major browsers (but only IE11 +). I do not know if this function was available at the time of writing the question or not.

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

Code Notes:

• This solution does not include setTimeout . Whenever you do this with setTimeout , you see the inserted text very quickly, like a blinking effect.
• If the text matches the condition, I manually set it to input . However, this does not raise the input and change events. If you need them, just turn them on manually
• A similar approach is to first check the text and, if it does not meet the requirements, call preventDefault , otherwise do nothing. This way you avoid manually setting the input value and triggering events later.

Answer 3

Using

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

and in case the verification fails , deleting the inserted text suits me.

Unfortunately, access to the clipboard has some drawbacks (the browser asks if it is allowed to check the clipboard, cross-browser compatibility, etc.)

If you agree with saving the last input value, the inserted text can be calculated anyway.

Here is my approach to calculating pasted text

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

I hope this helps you :)

(Feel free to clarify the calculation of the inserted text if you find any flaws)

Answer 4

My understanding of the issue is that we should not allow the insertion of data into a text field until it passes a specific check. Instead of using event.preventDefault() we can fix the value when the user enters some content using the on('input') listener and checking it for a specific condition, and if the verification fails, run the value of the text field.

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

Sample code (I use console.log() to print the inserted 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); } }); });