How to monitor the change of an input type text field?

Question

I need to monitor the change of the content of a text field, the function I use is this:

$(document).ready(function() {

  $("#nome").on("keyup change click focus", function() {
    $(".classenome").val($(this).val());
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<input type="text" id="nome" value="">
<input type="text" id="duble" class="classenome" value="">

I tried all the above events, when the user type directly in the "name" field works well because of the keyup, but if it fills in by that history list that the browser suggests the function only works when it leaves the field because of the event "change".

Is there any other event that monitors if the value/text is historical?

I’m thinking I’m gonna have to develop a timer for this, but I didn’t want to.

Answer 1

Use the event input, tested in Chrome and Firefox now and works when Browser does auto complete.

var input = document.querySelector('input');
input.addEventListener('input', function() {
  console.log('input', this.value);
});

jsFiddle: https://jsfiddle.net/mjn0kskb/