以编程方式添加项目时，Jquery textarea autogrow 不起作用答案

【问题标题】：Jquery textarea autogrow not working when adding items programmatically以编程方式添加项目时，Jquery textarea autogrow 不起作用
【发布时间】：2011-08-04 03:57:03
【问题描述】：

我试过了 http://www.technoreply.com/autogrow-textarea-plugin-version-2-0/ 和 https://gist.github.com/802204#file_live_sample.js

TextArea 的自动增长，如果您使用键盘添加项目，它们会很好地工作，但如果您以编程方式添加项目（例如每秒 1 个新项目），它们不会自动增长。

任何人都知道如何或在哪里可以找到一个 autogro textarea，如果我以编程方式添加新项目，它将自动增长？（例如 $('#txtUDSMessagesNotHandled').val($('#textarea').val()+'new text + '\n');

提前致谢。吉列尔莫。

【问题讨论】：

标签： javascript jquery jquery-plugins

【解决方案1】：

在live-sample.js，我们看到：

$('.js-auto-grow').live('keyup keydown change', function(evt) {

所以插件绑定了三个事件。你关心的是change。问题是，当您说$('#x').val('pancakes') 时，不会触发change 事件。玩这个：

http://jsfiddle.net/ambiguous/FPB4q/1/

你会看到的。或者，来自fine manual：

改变
当控件失去输入焦点并且其值在获得焦点后已被修改时，会发生更改事件。此事件对 INPUT、SELECT 和 TEXTAREA 有效。元素。

当您简单地调用$x.val('pancakes') 时，不会发生焦点更改，因此不会触发change 事件。

您需要做的就是自己触发事件：

$('#txtUDSMessagesNotHandled')
    .val($('#textarea').val()+'new text + '\n')
    .change();

然后它应该可以正常工作了。

另请注意，该插件要求<textarea> 同时具有row 和column 属性，否则它将不起作用。这是它的工作演示：

http://jsfiddle.net/ambiguous/Sr5gm/

【讨论】：

嗨，Mu，我试过了，但还是不行，当文本区域超过屏幕可以容纳的内容时，元素会被添加并隐藏。达到最大值时也不添加滚动条，这很有帮助。
@polonskyg：你能在 jsfiddle.net 上设置一下，这样我就可以看到你在做什么？
我想你可以在这里看到它jsfiddle.net/FPB4q/3。我不知道如何正确使用它，但我只是输入了这个： $('#x').autoGrow(); $('#x').change(function() { alert('changed'); }); $('#a').click(function() { $('#x').val($('#x').val() + 'pancakes'); }); $('#b').click(function() { $('#x').val($('#x').val() + 'pancakes').change(); });并添加了对gist.github.com/802204.js的引用
@polonskyg：几件事。我在那个小提琴中修复了插件资源（您需要使用要点上的“原始”选项来获取正确的 URL）。看起来该插件需要<textarea> 上的row 和column 属性。我为我的答案添加了一个功能齐全的小提琴。