How to handle input text "insert" event using backbone

Question

I am trying to send data to a server via Backbone if users write or insert a string inside a text input element.

in Backbone events, I thought something like this, but it doesn't work:

 events:{ "click .close":"closeResults", "keypress input":"fetchData", "paste input":"fetchData" }, fetchData:function (e) { var $this = this; window.setTimeout(function () { if ($.trim(e.target.value).length >= 3) { console.log(e.target.value); $this.collection.fetch({data: {limit: 10, term:$.trim(e.target.value)}}); } }, 0); } 

Answer 1

If you switch to using the keyup event instead of keypress and paste , it will work for paste through the keyboard ( ⌘ + v or Ctrl + v ) and typical input.

If you use the input event, it will work even if you right-click and paste (in addition to the same expected behavior as keyup ).

Additional input information: https://developer.mozilla.org/en-US/docs/Web/API/window.oninput

Answer 2

use keyup and mouseleave event handlers (instead of input) to make it work in IE too

see also How to determine the right mouse button + paste using JavaScript?

 events:{ "keyup input":"fetchData", "mouseleave input":"fetchData" }, 

Answer 3

Take a look

e.originalEvent

 _paste_plain_text : function (e) { e.preventDefault(); var text = e.originalEvent.clipboardData.getData("text/plain"); document.execCommand("insertHTML", false, text); }