Javascript 粘贴时文本区域自动调整大小

好的，这是我的问题。我正在使用这个插件(http://james.padolsey.com/javascript/jquery-plugin-autoresize/)当有更多文本时自动调整文本区域的大小。当我使用键盘粘贴时，它会自动调整大小。但是，当我使用鼠标粘贴时，它不起作用

因此，我调整文本区域大小的代码是：

$('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
});

在粘贴时调用自动调整大小函数的代码：

$('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

}))； }))

---

但是，这似乎不起作用。有什么想法吗？

主要的想法是：插件不跟踪粘贴事件，它只跟踪键盘事件。因此，您需要找到另一个插件，或者修改该插件（也跟踪鼠标事件）。
下面是（该插件的）代码的一部分，您应该在其中查找：

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

也许可以在那里添加

.bind（'click.dynSiz'，updateSize）

。

---

我不太熟悉jQuery，也不知道这些事件名称的含义。

主要思想是：插件不跟踪粘贴事件，它只跟踪键盘事件。因此，您需要找到另一个插件，或者修改该插件（也跟踪鼠标事件）。
下面是（该插件的）代码的一部分，您应该在其中查找：

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

也许可以在那里添加

.bind（'click.dynSiz'，updateSize）

。
我不太熟悉jQuery，也不知道这样的事件名称是什么意思。

根据这一点，您需要在粘贴事件上使用setTimeout等待几毫秒，然后再尝试检索值

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

榜样

因此，可能它的工作原理如下：

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

根据这一点，您需要在粘贴事件上使用setTimeout等待几毫秒，然后再尝试检索该值

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

榜样

因此，可能它的工作原理如下：

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

超轻重量的示例：

有人认为内容是可编辑的吗？不要乱动滚动，我唯一喜欢的JS是，如果你打算在blur上保存数据……显然，它在所有流行浏览器上都是兼容的：

只要将其样式设置为文本框，它就会自动调整大小……将其最小高度设置为首选文本高度，并将其设置为

这种方法的酷之处在于，您可以在某些浏览器上保存和标记

.自动高度{
最小高度：16px；
字体大小：16px；
保证金：0；
填充：10px；
字体系列：Arial；
线高：16px；
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
溢出：隐藏；
调整大小：无；
边框：1px实心#ccc；
大纲：无；
宽度：200px；
}
$（文档）.on（'blur'，'.autoheight'，函数（e）{
var$this=$（this）；
//文本在这里，你想用它做什么都行。
log（$this.html（））；
});
米老鼠

超轻重量：

有人认为内容是可编辑的吗？不要乱动滚动，我唯一喜欢的JS是，如果你打算在blur上保存数据……显然，它在所有流行浏览器上都是兼容的：

只要将其样式设置为文本框，它就会自动调整大小……将其最小高度设置为首选文本高度，并将其设置为

这种方法的酷之处在于，您可以在某些浏览器上保存和标记

.自动高度{
最小高度：16px；
字体大小：16px；
保证金：0；
填充：10px；
字体系列：Arial；
线高：16px；
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
溢出：隐藏；
调整大小：无；
边框：1px实心#ccc；
大纲：无；
宽度：200px；
}
$（文档）.on（'blur'，'.autoheight'，函数（e）{
var$this=$（this）；
//文本在这里，你想用它做什么都行。
log（$this.html（））；
});
米老鼠

是

$（'this'）。自动调整大小是打字错误？还是你的意思是
$（this）。自动调整大小是（this），但仍然不起作用是
$（'this'）。自动调整大小是打字错误？还是你的意思是
$（this）。自动调整大小是（this），但仍然不起作用AFAIR，HTML/js中没有
粘贴
事件，此代码将不起作用。这是由jQuery添加的。纯js中没有粘贴事件（在所有浏览器中）。AFAIR，HTML/js中没有
粘贴
事件，此代码将不起作用。这是由jQuery添加的。纯js中没有粘贴事件（在所有浏览器中）。请立即尝试更新的JSFIDLE来触发更改。它在JSFIDLE上适用吗？只是对动态添加的textareas进行了一点修改-将“bind”替换为“live”，现在它适用于使用JQuery添加的textareas。非常好，很高兴我能提供帮助！请注意，并非所有浏览器都支持粘贴事件：Opera不支持你可以提高textarea resize插件的性能，并通过限制resize公式的触发频率来产生更一致的结果：尝试更新后的JSFIDLE立即触发更改。它在JSFIDLE上对你有效吗？只需对其进行一点修改，以便动态添加ed textareas-将“bind”替换为“live”，现在它适用于添加了JQuery的textareas。非常好，很高兴我能提供帮助！请注意，并非所有浏览器都支持粘贴事件：Opera不支持粘贴事件，Firefox 2及更早版本也不支持粘贴事件。您可以提高textarea resize插件的性能，并产生更一致的效果限制调整大小公式触发频率的结果：