TextArea Auto Resize On Paste

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:
    开发者_Python百科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?

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

The main idea is that: plugin doesn't track paste events, it tracks only just keyboard events. Thus you'll need either to find another plugin, or modify that one (and track mouse events too).
Here's a part of code (of that plugin), where you should look for:

// Bind namespaced handlers to appropriate events:
textarea
    .unbind('.dynSiz')
    .bind('keyup.dynSiz', updateSize)
    .bind('keydown.dynSiz', updateSize)
    .bind('change.dynSiz', updateSize);

Maybe, add .bind('click.dynSiz', updateSize) there.
I'm not very familiar with jQuery and don't know, what such event names mean.

Super light weight:

Has anyone considered contenteditable? No messing around with scrolling,a nd the only JS I like about it is if you plan on saving the data on blur... and apparently, it's compatible on all of the popular browsers : http://caniuse.com/#feat=contenteditable

Just style it to look like a text box, and it autosizes... Make its min-height the preferred text height and have at it.

What's cool about this approach is that you can save and tags on some of the browsers.

http://jsfiddle.net/gbutiri/v31o8xfo/

<style>
.autoheight {
    min-height: 16px;
    font-size: 16px;
    margin: 0;
    padding: 10px;
    font-family: Arial;
    line-height: 16px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
    resize: none;
    border: 1px solid #ccc;
    outline: none;
    width: 200px;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).on('blur','.autoheight',function(e) {
    var $this = $(this);
    // The text is here. Do whatever you want with it.
    console.log($this.html());
});

</script>
<div class="autoheight contenteditable" contenteditable="true">Mickey <b>Mouse</b></div>