Question

Ok, here’s my problem. I”m using this plugin (http://james.padolsey.com/javascript/jquery-plugin-autoresize/) to autoresize my textarea when there’s more text. When I paste using keyboard, it autoresizes perfectly. However, when I paste using mouse, it doesn’t work.

So my code to resize textareas are:

$('textarea').autoResize({
    // On resize:
    onResize : function() {
        $(this).css({opacity:0.8});
    },
    // After resize:
    animateCallback : function() {
        $(this).css({opacity:1});
    },
    // Quite slow animation:
    animateDuration : 300,
    // More extra space:
    extraSpace : 40
});

My code to call the autoresize function on paste:

$('textarea').bind('paste', function() {
    $('this').autoResize({
// On resize:
onResize : function() {
    $(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
    $(this).css({opacity:1});
},
// Quite slow animation:
animateDuration : 300,
// More extra space:
extraSpace : 40

});
});

However, this doesn’t seem to work. Any ideas?

Answer 1

According to this question you need to use setTimeout on your paste event to wait a few milliseconds before you try to retrieve the value.

$('textarea').bind('paste', function() {
    var $textarea = $(this);
    setTimeout(function() {
        $("div").text($textarea.val());
    }, 250);
});

Example on jsfiddle

So maybe it might work like the following:

$('textarea').bind('paste', function () {
    var $textarea = $(this);
    setTimeout(function () {
        $textarea.trigger("change.dynSiz");
    }, 250);
});

Example on jsfiddle