Q:

Modifying input field on keyup, click, and drop events

I have an input field into which the user can either type data, can input data by clicking a list item (which produce text along the lines of, ' [text] '), or can input text by dragging and dropping a list item. The latter operations are implemented by the script presented on this page.
I'd like to remove extra whitespace from the input field when the user inputs data into it by any means (including the above, as well as copying and pasting). I thought that the following would handle it:
$('#my_input').on('change', function() {
   $(this).val($(this).val().replace(/  +?/g, ' '));
});

However, this doesn't take care of the drag and drop events, nor entering input by clicking. Can anyone tell me how to handle the removal of extra whitespace on typing, dropping, and clicking? Thank you.
EDIT: Here's a solution based on the answer offered below by Nicolas Henrard:
$('#my_input').on('propertychange keyup input paste drop click', function() {
  $(this).val($(this).val().replace(/  +?/g, ' '));
});

$('.my_list_item').on('propertychange click', function() {
  $('#my_input').val($('#my_input').val().replace(/  +?/g, ' '));
});

The downside to this, like Nicolas's solution, is that it neglects to remove the whitespace added by the last tag that was dropped or clicked (i.e. when a tag is dropped or clicked, it adds something like ' [text] ', which leaves an extra space if there was a space preceding this item until, if the solution above is implemented, some other interaction takes place with the list item or input). This can be fixed by adding .trim() to the second .val of both statements above, but this seems like something of a hack. Any ideas on resolving this last dropped or clicked tag issue?

A:

This jQuery code catches immediate changes to any element, and should work across all browsers:
$('.myElements').each(function() {
   var elem = $(this);

   // Save current value of element
   elem.data('oldVal', elem.val());

   // Look for changes in the value
   elem.bind("propertychange keyup input paste", function(event){
      // If value has changed...
      if (elem.data('oldVal') != elem.val()) {
       // Updated stored value
       elem.data('oldVal', elem.val());

       // Do action
       ....
     }
   });
 });

So, you have to wait for these events: propertychange keyup input paste

