Question

好的，这是我的问题。我正在使用这个插件（http://james.padolsey.com/javascript/jquery-plugin-autoresize/）在有更多文本时自动调整我的textarea。当我使用键盘粘贴时，它会完全自动恢复。但是，当我粘贴时使用鼠标，它不起作用。

所以我调整textareas大小的代码是：

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

我在代码上调用autoresize函数的代码：

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

}）; }）;

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

Answer 1

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

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

jsfiddle

上的示例

所以也许它可能会像以下一样起作用：

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

jsfiddle

上的示例

Answer 2

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

// 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不是很熟悉，也不知道这些事件的名字是什么意思。

Answer 3

超轻量：

有没有人认为满足？没有乱搞滚动，而且我喜欢它的唯一JS就是你打算在模糊上保存数据......显然，它在所有流行的浏览器上兼容：http://caniuse.com/#feat=contenteditable

只需将其设置为文本框样式，然后自动调整...使其最小高度成为首选文本高度并具有此值。

这种方法的优点在于您可以在某些浏览器上保存和标记。

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>

TextArea自动调整粘贴大小

3 个答案: