Update form validation on right-click cut/paste

Question

I check the length of user input to give feedback before they attempt to submit the form. Here's my code:

 var $foo = $("#foo"), $span = $("span") $foo.on('keydown keyup change', function(){ $span.text($foo.val().length); }).trigger('change'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea id="foo">Ipsum</textarea> <small><span></span> characters.</small> 

This works correctly for input typed. However, if a user cuts or pastes via the context menu, the count is not updated. How can I ensure the count is always updated?

Answer 1

You need to add input to the list of events that you handle:

$foo.on('keydown keyup change input', function() { ...

When the user does (for example) Right-click / Cut or Right-click / Paste, its the input event that gets fired.