events: { "paste .youtube-url" : "addUrl" }

addUrl: function(){
  console.log(this.$(".youtube-url").val());

So lets say I paste "bad" into the textbox first time

console output: (an empty string)

then if I paste append something like "coder"

console output: bad

instead of whats inside the box "badcoder", I guess this i because the pseudo paste event is fired before the text is inserted.

events: { "paste .youtube-url" : "addUrl" }

addUrl: function(){
  console.log(this.$(".youtube-url").val());

So lets say I paste "bad" into the textbox first time

console output: (an empty string)

then if I paste append something like "coder"

console output: bad

instead of whats inside the box "badcoder", I guess this i because the pseudo paste event is fired before the text is inserted.

• javascript
• jquery
• backbone.js

2 Answers 2

Instead of using the paste event you could use the keyup event which fires if someone pastes but also only fires after the value for the input has been updated.

UPDATE

Good comment from @Micah (and @JohnnyO). Here's a fix I found to work:

$('input').on('paste', function () {
    var that = this;
    setTimeout(function () {
        alert(that.value);
    }, 0);
});​

This sets a timeout so the code that reads the input's value is only run after the rest of the code in the stack has been run. I've only tested in Chrome 21 but the zero-time-timeout seems to do the trick.

Demo: http://jsfiddle.net/H4K4R/

The answer by @Jasper only works when pasting by keyboard. When using the mouse and the context menu to paste, you won't get a keyup event. The best event to watch for is the 'input' event. Unfortunately, for IE versions before 9, you'll need to watch for the 'propertychange' event instead because they don't support 'input'. 'propertychange' doesn't bubble, so you won't be able to wire up this event like you're doing using Backbone, and instead will need to bind it directly to the '.youtube-url' element.