Question

我正在尝试创建一个编辑页面，用户可以在textarea中编辑他的内容，调整大小以适应内容，我正在使用此插件执行此操作：http://www.jacklmoore.com/autosize/

但是当我访问编辑页面时，textarea不会调整大小以适应内容，这只有在我手动刷新页面时才会发生。这是代码：

<template name="postEdit">
    <textarea autofocus name="content" type="text" value="">{{content}}</textarea>
</template>

Template.postEdit.rendered = function() {
     $('textarea').autosize(); 
};

我也尝试使用Meteor.defer，但它不起作用：

Template.postEdit.rendered = function() {
    Meteor.defer(function() {
    $('textarea').autosize();
 });     
};

当我手动刷新页面并且textarea最终调整大小时，textarea html会改变：

<textarea class="review" name="review" type="text" value="" placeholder="Blablabla" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 664px;"></textarea>

我的代码有问题或我的方法有误吗？

感谢。

Answer 1

正如它在'已知问题＆amp;解决方案'Docs of jQuery Autoresize您可能想要这样做：

Template.hello.rendered = function(){
    $('textarea').autosize().show().trigger('autosize.resize');
}

Answer 2

实际问题是，在调用插件时，DOM未完全加载。这应该有效：

$(function(){
    $("textarea").autosize();
});

Answer 3

我不是jQuery专家，但如果我记得正确，你可以这样做：

Template.postEdit.rendered = function() {
     $(this.find('textarea')).autosize(); 
};

Answer 4

试试这种方式

$(document).ready(function(){
 $('textarea').autosize();   
});

在Meteor中调整textarea的大小

4 个答案: