[jquery] Detect changed input text box

Each answer is missing some points, so here is my solution:

_x000D_
_x000D_
$("#input").on("input", function(e) {_x000D_
  var input = $(this);_x000D_
  var val = input.val();_x000D_
_x000D_
  if (input.data("lastval") != val) {_x000D_
    input.data("lastval", val);_x000D_
_x000D_
    //your change action goes here _x000D_
    console.log(val);_x000D_
  }_x000D_
_x000D_
});
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<input type="text" id="input">_x000D_
<p>Try to drag the letters and copy paste</p>
_x000D_
_x000D_
_x000D_

The Input Event fires on Keyboard input, Mouse Drag, Autofill and Copy-Paste tested on Chrome and Firefox. Checking for previous value makes it detect real changes, which means not firing when pasting the same thing or typing the same character or etc.

Working example: http://jsfiddle.net/g6pcp/473/


update:

And if you like to run your change function only when user finishes typing and prevent firing the change action several times, you could try this:

_x000D_
_x000D_
var timerid;_x000D_
$("#input").on("input", function(e) {_x000D_
  var value = $(this).val();_x000D_
  if ($(this).data("lastval") != value) {_x000D_
_x000D_
    $(this).data("lastval", value);_x000D_
    clearTimeout(timerid);_x000D_
_x000D_
    timerid = setTimeout(function() {_x000D_
      //your change action goes here _x000D_
      console.log(value);_x000D_
    }, 500);_x000D_
  };_x000D_
});
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<input type="text" id="input">
_x000D_
_x000D_
_x000D_

If user starts typing (e.g. "foobar") this code prevents your change action to run for every letter user types and and only runs when user stops typing, This is good specially for when you send the input to the server (e.g. search inputs), that way server does only one search for foobar and not six searches for f and then fo and then foo and foob and so on.